使用带有笑话和酶的样式化组件创建的测试组件

Question

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

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

Answer 1

快速方法] >>

您可以导出NoJobs，例如

const NoJobs = styled.h1`...
这将起作用。另外，您可以使用可能包含find()字符串的find()，因此可以

displayName
然后在测试中：

const NoJobs = styled.h1`...
NoJobs.displayName = "NoJobs";
也可以安装expect(wrapper.find('NoJobs').text()).toEqual("No Jobs Found!!!");
来自动处理。

系统方法

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

special babel plugin
以及以后的测试中

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