jestjs - 使用 styled-jsx，我如何用酶测试风格？

Question

我正在使用带有 styled-jsx 的 Next.js，测试酶 + 玩笑。

我想测试道具样式，但我不知道如何测试。

index.js

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

样式.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');

有没有办法解决这个问题？

Answer 1

使用react-test-renderernpm 包，您可以对 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')
})