CODEWITHSUNDEEP
jestjsenzymenext.jsstyled-jsx
kkangil
kkangil

Reputation: 1746

Using styled-jsx, How can I test style with enzyme?

I'm using Next.js with styled-jsx, testing enzyme + jest.

I want to test props style but I don't know How can I test.

index.js

const App = (props) => {
    const { className, styles } = styles(props);
    return (
        <div className={`${className}`}>
            <h1>test</h1>
            {styles}
        </div>
    )
}

style.js

import css from 'styled-jsx/css';
export default (props) => css.resolve`
    h1 {
        color: ${props.color} || "red";
    }
`

I tried to test this way but It's not working.

const wrapper = shallow(<App color={"blue"}/>);
expect(wrapper.find('h1').prop('style')).toHaveProperty('color', 'blue');

Is there way to solve this problem?

Upvotes: 0

Views: 362

Answers (1)

Mayuri S Kulkarni
Mayuri S Kulkarni

Reputation: 757

Using react-test-renderer npm package you can do snapshot testing for Style component. Try this, might help you:

import renderer from 'react-test-renderer';

test('Style component unit testing', () => {
  const tree = renderer.create(<App color={"blue"} />).toJSON()
  expect(tree).toMatchSnapshot()
  expect(tree).toHaveStyleRule('color', 'red')
})

Upvotes: 0

Related Questions