Tests pass when styles change on a nested component using enzyme shallow.

[tylerferguson]

Hi @MicheleBertoli . First off, thanks for making this package - it looks like it could be super useful!

I'm really keen to get using jest-styled-components but have run into this issue. To reproduce:

1. Clone jest-styled-components
2. Change test/index.spec.js to remove the react-test-renderer test so that we don't get confused by test output.
3. Change a style on the Title component.
4. Re-run tests. Test still passes.

If we inspect the snapshot the nested Title component is serialised as a styled.h1 and there is no information about the styles that have been applied. I'd like to try help with this if I get a chance.

Thanks,

Tyler

[MicheleBertoli]

Hello Tyler, thanks for opening the issue.
I understand why this might be confusing but that's how shallow rendering works.
Shallow rendering renders the components only one level deep, and that's the reason why the Title is shown as styled.h1 and it doesn't have any class names.

I don't believe this is an issue or something to solve, but I'll be happy to discuss further in case you do. I'm going to close this but anyone should feel free to reopen it in case we want to address the problem.

[tylerferguson]

That does make sense. I think it was a mistake in how I was viewing the Title component. I was seeing it as: <Title className="2rQth">Hello World</Title>, when it's actually more like: Title =(props) => <h1 className="2rQth">{props.children}</h1>. The className is not passed as a prop toTitle.

In that case, when it comes to testing examples like this (where we have two components that we would like to test, but we don't want to do a deep render because the contents have a lot of stuff in the tree that we are testing elsewhere), is there a decent way of snapshotting the styles? The options I can think of are:

1. Promote the component to its own module and do snapshot testing on it there.
2. Deep render with manual mocks on the components that you don't want to render.

Thanks for your help on this!

[mxstbr]

Promote the component to its own module and do snapshot testing on it there.

This is definitely the way to go! You could also just partially export it if you don't want to add another file:

export const Title = // ...

export default class FullComponent extends React.Component { /* ... */ }

Then you can import both in your tests and test the separately:

import FullComponent, { Title } from '../FullComponent';

describe('<FullComponent />', () => { /* ...shallow render <FullComponent />... */ })

describe('<Title />', () => { /* ...shallow render <Titlte /> ... */ })

[tylerferguson]

Perfect. Thanks for the advice @mxstbr. I'll get to it!

[melounek]

I fell into the same issue and finally I realized to use your second option of deep rendering with mocking (ignoring) the nested components defining empty functions.

jest.mock('../Inner', () => 'inner')

const snapshot = mount(<Wrapper />)

I documented it here, so I hope it will be helpful for some others... https://medium.com/@melounek/jest-snapshots-with-nested-components-c08ceef34108

[MicheleBertoli]

Thank you very much, @melounek.