Jestjs 使用样式化jsx，我如何用酶测试样式？

我将Next.js与样式化的jsx一起使用，测试enzyme+jest

我想测试道具的风格，但我不知道如何测试

index.js

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

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');

const wrapper=shallow（）；
expect（wrapper.find（'h1'）.prop（'style'））.toHaveProperty（'color'，'blue'）；

---

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

使用

react test renderer

npm包，您可以对样式组件进行快照测试。试试这个，可能会对您有所帮助：

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

从“react test renderer”导入渲染器；
test（'样式组件单元测试'，（）=>{
const tree=renderer.create（）.toJSON（）
expect（tree.toMatchSnapshot（））
expect（tree）.toHaveStyleRule（'color'，'red'））
})

我使用的是酶而不是反应测试渲染器。它还支持快照测试。我知道HaveStyleRule的方法，但它来自jest样式的组件npm包，而不是样式化的jsx。它在样式化jsx中也能正常工作吗？您可以使用

react-test呈现程序

以及

Enzyme

。另外，

toHaveStyleRule

将与

react测试呈现程序

完美配合。