使用 jest 和酶类测试样式组件答案

【问题标题】：test styled-component using jest and enzyme class使用 jest 和酶类测试样式组件
【发布时间】：2019-05-13 13:05:44
【问题描述】：

说我有一个 div 很少的组件，所以我不能这样做expect(wrapper.contains(<div></div>)).toBeTruthy()

然后，我必须获取类，例如 expect(wrapper.find('myTargetedClass')).toBeTruthy(1)，但这仅适用于 css-module，不适用于 styled-component，该类是散列的。

【问题讨论】：

标签： javascript css reactjs ecmascript-6

【解决方案1】：

您不需要找到确切的className，因为类名是hashed。但是你可以检查组件是否有className。

import { mount } from 'enzyme';
import { enzymeFind } from 'styled-components/test-utils';
const wrapper = mount(<StyledButton />); // StyledButton is your styled-components's component
const renderedComponent = enzymeFind(wrapper, StyledButton);
expect(renderedComponent.prop('className')).toBeDefined();

上面的可以让你知道 styled-component 生成的组件是否有 className 属性。

【讨论】：

我明白了，不知道styled-components 有 test-utils，所以如果我们使用 styled-component，这将是测试反应的常见模式？它适用于浅层吗？为什么在这里使用 mount？
是的。它确实有test-utils。我不确定它是否适用于浅层。但推荐的方法是使用安装。这里有更多细节styled-components.com/docs/api#test-utilities
问题，找到具有 className 的组件有意义吗？不应该是.toHaveLength(1) 或.exisits.tobeTruthy() 吗？