Is the faction that lighten fails to work in testing-library a polished problem or an rtl/jest problem? about polished

[bhough]

@crevulus This isn't specific to polished. It applies to anything that requires access to the theme object for your tests to pass. This is an older put relevant thread: styled-components/styled-components#1319

[crevulus]

@bhough Thanks for your help.

For anyone with the same issue: the answer is to wrap with a ThemeProvider, similar to how they've done it in the Setup section of testing-library's docs: https://testing-library.com/docs/react-testing-library/setup/#custom-render

[bhough]

@crevulus This is almost always due to not properly mocking props.theme. I'd suggest logging out the value of props.theme.primary in your tests to see what it contains. That error likely means you aren't getting the hex value you think you are when you run in your test environment.

[crevulus]

@bhough Thanks for your feedback. I haven't mocked theme at all. Didn't realise that was a requirement when using polished -- it works fine for other places where I'm using theme so just assumed.

To "properly" mock theme, should I follow this snippet?

const renderComponent = ({ theme, name }) =>
  render(
    <ThemeProvider theme={theme}>
      <HelloMessageStyled name={name} />
    </ThemeProvider>
  );

it('renders greeting', async () => {
  const { getByText } = renderComponent({ theme: mockThemeObject, name: 'Maggie' });

  await waitForElement(() => getByText(/hello Maggie/i));
});