使用带有 jest 和酶的样式化组件创建的测试组件答案

【问题标题】：Testing component created using styled component with jest and enzyme使用带有 jest 和酶的样式化组件创建的测试组件
【发布时间】：2020-04-17 14:04:23
【问题描述】：

我有一些使用样式化组件库创建的标签：

component.js

....
const NoJobs = styled.h1`
    text-align: center;
`;
....
<div>
  <NoJobs>
    No Jobs Found!!!
  </NoJobs>
</div>

我想测试这个组件，下面是我的测试用例：

component.test.js

describe('<JobList />', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(<JobList />);
    });

    it('should show "no data found" when there is no data', () => {
       expect(wrapper.contains(<NoJobs>No Jobs Found!!!</NoJobs>)).toEqual(true);
    });
});

当我运行上面的测试时，它显示：没有定义 NoJobs。

虽然如果我在 component.js 和 component.test.js 中使用 plan div 标签更改 NoJobs，它工作正常。如何测试使用 styled-components 创建的标签？

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

快捷方式

你可以导出NoJobslike

const NoJobs = styled.h1`...

这会奏效。你也可以使用find()，它可能需要一个displayName字符串，所以你可以

const NoJobs = styled.h1`...
NoJobs.displayName = "NoJobs";

然后在测试中：

expect(wrapper.find('NoJobs').text()).toEqual("No Jobs Found!!!");

您也可以安装special babel plugin 来自动处理。

系统方法

但对我来说，最可维护的方法是完全避免坚持显示名称/组件名称并使用基于属性的选择器：

<div>
  <NoJobs data-testid="no-jobs-message">
    No Jobs Found!!!
  </NoJobs>
</div>

及以后的测试

expect(wrapper.find({"data-testid": "no-jobs-message"}).text()).toEqual("No Jobs Found!!!")

【讨论】：

非常感谢。我使用了第二种方法，效果很好。如果我在大型应用程序中使用相同的方法，它会对性能产生任何影响吗？
我预计不会有任何性能下降。但可维护性更差，这对于大型应用程序很重要。
那么对于大型应用程序推荐的方式是什么？
“系统方法”，带有基于属性的查找（不一定使用综合 data-testid，但它是很好的第一个候选者）。这也使您的代码准备好进行 e2e 测试（），这对于大型应用程序来说是强制性的