ThemeProvider not providing theme to styled components in Vitest

[chris-susantooo]

Hi all! I encountered an issue about emotion not able to access theme from the ThemeProvider component by Theme UI.

To reproduce the issue

Codesandbox: run yarn test in link

As seen in the test cases, emotion (useTheme hook, styled components, etc.) did not receive the theme context from the ThemeProvider from Theme UI.

In the custom ThemeProvider.tsx, we have:

import { FC, ReactNode } from "react";
import { ThemeProvider as Provider, Theme } from "theme-ui";

interface Props {
  theme?: Theme;
  children?: ReactNode;
}

const defaultTheme = {
  colors: {
    customColor: "blue",
  },
};

const ThemeProvider: FC<Props> = ({ theme = defaultTheme, children }) => (
  <Provider theme={theme}>{children}</Provider>
);

export default ThemeProvider;

In ThemeProvider.test.tsx, we have:

import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { render, screen } from "@testing-library/react";
import { FC, ReactNode } from "react";
import { useThemeUI } from "theme-ui";
import ThemeProvider from "./ThemeProvider";

const FakeComponent = styled.button`
  color: ${({ theme }) => theme?.colors?.customColor || "red"};
`;

const receiveTheme = vi.fn();

const FakeComponent2 = () => {
  const themeFromEmotion = useTheme();
  const { theme: themeFromThemeUI } = useThemeUI();

  receiveTheme(themeFromEmotion, themeFromThemeUI);

  return <FakeComponent />;
};

describe("ThemeProvider", () => {
  it("should render FakeComponent with blue color text", () => {
    render(<FakeComponent />, { wrapper: ThemeProvider });
    expect(screen.getByRole("button")).toHaveStyleRule("color", "blue");
  });

  it("should render FakeComponent with color token from theme override", () => {
    const themeOverride = {
      colors: { customColor: "green" },
    };
    const Wrapper: FC<{ children: ReactNode }> = ({ children }) => (
      <ThemeProvider theme={themeOverride}>{children}</ThemeProvider>
    );
    render(<FakeComponent />, { wrapper: Wrapper });

    expect(screen.getByRole("button")).toHaveStyleRule("color", "green");
  });

  it("should be able to receive theme with useTheme and useThemeUI", () => {
    render(<FakeComponent2 />, { wrapper: ThemeProvider });
    expect(receiveTheme).toHaveBeenCalledOnce();

    const [themeFromEmotion, themeFromThemeUI] = receiveTheme.mock.calls[0];
    expect(themeFromThemeUI).toEqual({
      colors: { customColor: "var(--theme-ui-colors-customColor)" },
      rawColors: { customColor: "blue" },
    });
    expect(themeFromEmotion).not.toEqual({});
  });
});

And the test results:

❯ src/ThemeProvider.test.tsx (3)
   ❯ ThemeProvider (3)
     × should render FakeComponent with blue color text
     × should render FakeComponent with color token from theme override
     × should be able to receive theme with useTheme and useThemeUI

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/ThemeProvider.test.tsx > ThemeProvider > should render FakeComponent with blue color text
Error: Expected color to match:
  blue
Received:
  red
 ❯ src/ThemeProvider.test.tsx:26:40
     24|   it("should render FakeComponent with blue color text", () => {
     25|     render(<FakeComponent />, { wrapper: ThemeProvider });
     26|     expect(screen.getByRole("button")).toHaveStyleRule("color", "blue");
       |                                        ^
     27|   });
     28| 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 FAIL  src/ThemeProvider.test.tsx > ThemeProvider > should render FakeComponent with color token from theme override
Error: Expected color to match:
  green
Received:
  red
 ❯ src/ThemeProvider.test.tsx:38:40
     36|     render(<FakeComponent />, { wrapper: Wrapper });
     37| 
     38|     expect(screen.getByRole("button")).toHaveStyleRule("color", "green");
       |                                        ^
     39|   });
     40| 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯

 FAIL  src/ThemeProvider.test.tsx > ThemeProvider > should be able to receive theme with useTheme and useThemeUI
AssertionError: expected {} to not deeply equal {}
 ❯ src/ThemeProvider.test.tsx:50:34
     48|       rawColors: { customColor: "blue" },
     49|     });
     50|     expect(themeFromEmotion).not.toEqual({});
       |                                  ^
     51|   });
     52| });

  - Expected  - 0
  + Received  + 0

    {}
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯

 Test Files  1 failed (1)
      Tests  3 failed (3)
   Start at  06:59:57
   Duration  749ms


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Expected behavior

As mentioned in the docs

Theme UI itself doesn’t expose an API for styled components, but works seamlessly with the styled API from the @emotion/styled package. Components written with it should have access to the same theming context that Theme UI uses.

Instead of using the ThemeProvider component from @emotion/react, import and use the Theme UI provider at your app’s root level.

Emotion should be able to receive the theme context in Vitest, just like in production. Did I miss any project setup that leads to this? Thanks a lot!

[hasparus]

Might be related to this: vitest-dev/vitest#1562

[chris-susantooo]

Thanks for looking into this! I tried using:

• deps.inline: ['@emotion/styled']
• deps.inline: ['theme-ui']
• deps.inline: ['@emotion/styled', 'theme-ui']
• registerNodeLoader: true

Unfortunately they didn't help. I agree that there's a difference between vite and vitest in resolving dependencies, these test cases exist before I started integrating Theme UI (I was using the ThemeProvider from emotion) and the test cases were passing. After I switched to ThemeProvider from Theme UI, the tests start to fail, that's why I opened a discussion here in Theme UI side.

I guess I'll continue to dig around😅 But thanks again for giving me directions🙏🏻