Usage with context providers

[kwiat1990]

Hi @jrestall referencing your response from this thread remix-run/remix#2481 (reply in thread), I would like this discussion to not spam the Remix thread.

I've updated createRemixStub with your changes and the test below still has problems with reactivity of react's context:

it("sets correctly a color theme", async () => {
    const { rerender } = render(
      <RemixStub initialLoaderData={{ "/": { theme: Theme.LIGHT } }} />
    );

    // theme is correctly set to light
    expect(await screen.findByRole("button")).toMatchInlineSnapshot(`
      <button>
        <svg class="text-blue-500"> ...</svg>
      </button>
    `);
    
    rerender(<RemixStub initialLoaderData={{ "/": { theme: Theme.DARK } }} />);
    // instead of using `rerender` I've tried first to trigger user interaction but it didn't work:
    // user.click(screen.getByRole("button"));
   
    // theme didn't get updated to dark (className should be `text-yellow-500`)
    expect(await screen.findByRole("button")).toMatchInlineSnapshot(`
      <button>
        <svg class="text-blue-500"> ...</svg>
      </button>
    `);
  });

My first approach was to use user event and to fire a click to change the theme (instead this line rerender(<RemixStub initialLoaderData={{ "/": { theme: Theme.DARK } }} />)) as it's was the component make in real life, but it also didn't work.

My stup for this test look following:

const RemixStub = createRemixStub([
    {
      path: "/",
      loader: () => ({ theme: Theme.LIGHT }), // this seem always to be `undefined` and loader's data comes rather from `initialLoaderData` prop, so I don't quite know why we need this here
      element: <TestSubject />,
    },
  ]);

  function TestSubject() {
    const { theme } = useLoaderData();

    return (
      <ThemeProvider specifiedTheme={theme}>
        <ThemeToggler />
      </ThemeProvider>
    );
  }

[jrestall]

Hey @kwiat1990, doing a rerender with different initialLoaderData I don't think is the right approach as the loaderData is stored in React state by Remix, so a rerender isn't going to cause the loader data to update. You would need to trigger a transition by submitting a form or navigating, to cause the state to be updated, but this can be tricky with jsdom.

If you just want to test the rendering of ThemeToggler for each theme then I'd do that using render in two separate tests. Otherwise the button should submit a form and Remix should update the loader data from the mock loader method.

[kwiat1990]

All the toggle button make is to call setTheme function exposed by the hook. That’s why I thought it should work somehow with user interaction approach. But in neither case a reload will be triggered.

My goal was to test if on a click the theme will be switched. It seems that what I only can do is to check if a correct icon gets render based on the current theme.

[jrestall]

I gave it a quick go and the following is working for me. I'm wondering if you are awiting the user.click or not and whether that may be the issue.

import { useLoaderData } from "@remix-run/react";
import { render, screen } from "@testing-library/react";
import { createContext, useContext } from "react";
import { createRemixStub } from "remix-stubs";
import userEvent from "@testing-library/user-event";
import { useState } from "react";

enum Theme {
  LIGHT = 1,
  DARK = 2,
}

type ThemeContextType = {
  theme: Theme;
  toggleTheme: () => void;
};

const initialContext: ThemeContextType = {
  theme: Theme.LIGHT,
  toggleTheme: (): void => {
    throw new Error("toggleTheme function must be overridden");
  },
};

function ThemeToggler() {
  const { theme, toggleTheme } = useContext<ThemeContextType>(ThemeContext);
  return (
    <button
      onClick={() => {
        console.log("Clicked!");
        toggleTheme();
      }}
    >
      <svg className="text-blue-500" />
      {theme === Theme.DARK ? "DARK" : "LIGHT"}
    </button>
  );
}

const ThemeContext = createContext<ThemeContextType>(initialContext);
function ThemeProvider({
  children,
  specifiedTheme,
}: {
  children: React.ReactNode;
  specifiedTheme: Theme;
}) {
  const [theme, setTheme] = useState<Theme>(specifiedTheme);
  const toggleTheme = () => {
    setTheme((theme) => (theme === Theme.DARK ? Theme.LIGHT : Theme.DARK));
  };
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

describe("Team Route", () => {
  const RemixStub = createRemixStub([
    {
      path: "/",
      element: <TestSubject />,
    },
  ]);

  function TestSubject() {
    const { theme } = useLoaderData();
    return (
      <ThemeProvider specifiedTheme={theme}>
        <ThemeToggler />
      </ThemeProvider>
    );
  }

  it("sets correctly a color theme", async () => {
    const user = userEvent.setup();
    render(<RemixStub initialLoaderData={{ "/": { theme: Theme.LIGHT } }} />);

    // theme is correctly set to light
    expect(await screen.findByRole("button")).toMatchInlineSnapshot(`
      <button>
        <svg
          class="text-blue-500"
        />
        LIGHT
      </button>
    `);

    //render(<RemixStub initialLoaderData={{ "/": { theme: Theme.DARK } }} />);
    // instead of using `rerender` I've tried first to trigger user interaction but it didn't work:
    await user.click(await screen.findByRole("button"));

    // theme didn't get updated to dark (className should be `text-yellow-500`)
    expect(await screen.findByRole("button")).toMatchInlineSnapshot(`
      <button>
        <svg
          class="text-blue-500"
        />
        DARK
      </button>
    `);
  });

  it("sets correctly a dark color theme", async () => {
    render(<RemixStub initialLoaderData={{ "/": { theme: Theme.DARK } }} />);
    // instead of using `rerender` I've tried first to trigger user interaction but it didn't work:
    // user.click(screen.getByRole("button"));

    // theme didn't get updated to dark (className should be `text-yellow-500`)
    expect(await screen.findByRole("button")).toMatchInlineSnapshot(`
      <button>
        <svg
          class="text-blue-500"
        />
        DARK
      </button>
    `);
  });
});

[kwiat1990]

I have used Matt's solution for the theming: https://www.mattstobbs.com/remix-dark-mode. And by me it fails on fetcher.submit() with the following error:

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

Error: No matches found
 ❯ invariant node_modules/@remix-run/react/dist/invariant.js:15:11
 ❯ Object.send node_modules/@remix-run/react/dist/transition.js:217:11
 ❯ Object.submit node_modules/@remix-run/react/dist/components.js:933:25
 ❯ app/lib/theme-provider.tsx:62:17
     60|       return;
     61|     }
     62|     persistTheme.submit({ theme }, { action: "action/set-theme", method: "post" });
       |                 ^
     63|   }, [theme]);

I thought that fetcher should work out-of-the-box with the stub approach without the need of mocking anything.

But at least after defining action in TestSubject I see changes in the snapshots after user's click:

{
      path: "api/theme",
      action: async ({ request }) => {
        return null;
      },
},

[kwiat1990]

Sadly, the mentioned error persists but after adding action it moves to another places, where getPreferredTheme is called inside useState initial callback. I've tried to add try/catch block, where a promise is being handled but it didn't make any difference and I don't really know what's wrong.