Используя styled-jsx, Как я могу проверить стиль с помощью энзима? - PullRequest
Новая
       39

Используя styled-jsx, Как я могу проверить стиль с помощью энзима?

0 голосов
/ 12 февраля 2020

Я использую Next. js с styled-jsx, тестирую энзим + шут.

Я хочу протестировать стиль реквизита, но не знаю, как я могу протестировать.

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";
    }
`

Я пытался проверить этот способ, но это не так работает. 

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

Есть ли способ решить эту проблему?

1 Ответ

0 голосов
/ 12 февраля 2020

Используя пакет react-test-renderer npm, вы можете выполнить тестирование снимка для компонента Style. Попробуйте это, может помочь вам: 

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')
})
...