Add a helper to quickly provide a theme context w/o the ThemeProvider HOC

[kitten]

There have been a lot of workaround and a lot of confused users around how to test theming.

styled-components/styled-components#624

The general problem is that wrapping a StyledComponent element in the ThemeProvider is not acceptable as it won't allow access to all enzyme methods for example.

Thus it's desirable to write a quick helper that creates a theme context or sth similar. Maybe it should also just be solved using some documentation.

For better or for worse, I'm going to lock the issue on the SC repo and continue a discussion for a solution here, since this can be solved using a simple helper and some text, instead of a huge, elongated issue on the styled-components repo, where people don't immediately spot the right workaround.

cc @MicheleBertoli (sorry 😆 let's see if this goes well)

[JimmyLv]

Hi @philpl , what do you mean add theme prop in enzyme in styled-components/styled-components#624 (comment)? Could you please give me a example?

I tried to add theme as prop in the withTheme(ListItem) HOC component but still not working:

# ListItem.js

export default withTheme(ListItem)

# ListItem.test.js

import ListItem from './ListItem'

const wrapper = mount(
        <ListItem
          id={summary.number}
          theme={injectTheme}
        />);

[kitten]

@JimmyLv This approach indeed doesn't work for withTheme since it requires a theme context, as otherwise it's not serving its purpose. I suggest you use the unwrapped version of your component in your test to pass the theme prop manually for now.

But this is a nice example of why a helper for adding the theme context would be nice and can't always be replaced by just passing the theme prop manually.

[MicheleBertoli]

Thanks for opening the issue @philpl, I agree this repo is the right place to discuss testing and I'm more than happy to think about a solution.

[chhuang]

How do you pass the theme prop?

[MicheleBertoli]

Hello @chhuang,
Suppose you are testing the following component (which expects a theme):

const Button = styled.button`
  color: ${props => props.theme.main};
`
const theme = {
  main: 'mediumseagreen',
}

If you pass a theme prop to it:

test('theming', () => {
  const tree = renderer.create(
    <Button theme={theme} />
  ).toJSON()

  expect(tree).toMatchSnapshot()
})

it works as expected.

[chhuang]

Thanks @MicheleBertoli!

Is it possible to pass the theme to the nested components? e.g. the test will break if I have another component using theme inside Button.

[MicheleBertoli]

In that case, you can use the ThemeProvider.

For example, suppose you have a Wrapper component:

const Wrapper = ({ children }) => <div>{children}</div>

The following test works as expected:

test('theming', () => {
  const tree = renderer.create(
    <ThemeProvider theme={theme}>
      <Wrapper>
        <Wrapper>
          <Wrapper>
            <Button />
          </Wrapper>
        </Wrapper>
      </Wrapper>
    </ThemeProvider>
  ).toJSON()

  expect(tree).toMatchSnapshot()
})

I hope this helps, @chhuang.

[carlkenne]

@MicheleBertoli one problem with passing the theme as a prop + taking a snapshot is that the whole theme gets caught in the snapshot. If the theme changes (a new color is added) the test will fail, which makes the test very fragile.

[MicheleBertoli]

@carlkenne that's true only if you are rendering the tree using Enzyme, but it doesn't apply to the react-test-renderer - which is the recommended way for generating snapshots.

[chhuang]

@carlkenne if you are using Enzyme, you can try enzyme-to-json. react-test-renderer is fine.

[dangoslen]

@philpl new to open source, so forgive me for butting in, but is it unreasonable or undesirable to use the same workaround described in the previous thread as a 'blessed' method as part of this project? I've used that same workaround for testing some of my work with success, but it is fragile to upstream changes, as noted here.

Sorry again for butting in!