polished function throws error only in test suite, not in actual app/browser

Question

I have a button that utilises the lighten helper from polished (styled-componenents). I invoke it on hover like so:

FAB.styles.tsx

&:hover,
&:focus {
    * {
      cursor: pointer;
    }

    background: ${(props) => lighten(0.1, props.theme.primary)};
    transition: background 0.25s;
}

No errors, works exactly as intended.

When I try to test that component at all, I get the following error:

    Passed an incorrect argument to a color function, please pass a string representation of a color.

      41 |     }
      42 |
    > 43 |     background: ${(props) => lighten(0.1, props.theme.primary)} !important;

Why is this only throwing an error here when no such errors are thrown in the browser?

Answer 1

The answer is to wrapp your tests in a ThemeProvider. You can do this with a custom render method, similar to the one they show in the testing-library docs on setup.

const Wrapper = ({ children }: any) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">
) => render(ui, { wrapper: Wrapper, ...options });

export * from "@testing-library/react";

it("renders something", () => {
    customRender(<Component />);
    const linkElement = screen.getByTitle(/Work with us/i);
    expect(linkElement).toBeInTheDocument();
});

I found the answer thanks to the help of Brian Hough, one of the maintainers of polished/styled-components. You can see our thread here.