javascript - 测试使用带有 Jest 和 enzyme 的样式组件创建的组件

Question

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

组件.js

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

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

组件.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，它工作正常。如何测试使用样式组件创建的标签？

Answer 1

快捷方式

您可以像这样导出NoJobs

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!!!")