You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using lighten on a component and works fine in the browser with no errors thrown. The value I'm passing in is from props.theme, but it is just a string of a hex value.
When I try running any tests in a component that uses lighten, 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)};
Is this a problem with polished or should I be bringing it up with testing-library?
I understand this is a relatively common issue when people try to pass in rgba/hls values, but I'm passing in a hex and, again, fine the browser. Works as intended.
Relevant Information
All relevant info is above.
The text was updated successfully, but these errors were encountered:
@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.
@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?
constrenderComponent=({ theme, name })=>render(<ThemeProvidertheme={theme}><HelloMessageStyledname={name}/></ThemeProvider>);it('renders greeting',async()=>{const{ getByText }=renderComponent({theme: mockThemeObject,name: 'Maggie'});awaitwaitForElement(()=>getByText(/hello Maggie/i));});
@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
Question
I'm using
lighten
on a component and works fine in the browser with no errors thrown. The value I'm passing in is fromprops.theme
, but it is just a string of a hex value.When I try running any tests in a component that uses
lighten
, I get the following error:Is this a problem with polished or should I be bringing it up with testing-library?
I understand this is a relatively common issue when people try to pass in rgba/hls values, but I'm passing in a hex and, again, fine the browser. Works as intended.
Relevant Information
All relevant info is above.
The text was updated successfully, but these errors were encountered: