Javascript 使用带有jest和Ezyme的样式化组件创建的测试组件

我使用样式化组件库创建了一些标记：

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

快速方法

你可以出口像这样的工作

这会奏效的。您还可以使用可能包含displayName字符串的

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

然后在测试中：

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

您还可以安装以自动处理该问题

系统方法

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

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

---

谢谢。我使用了第二种方法，效果非常好。如果我在大型应用程序中使用相同的方法，会对性能产生影响吗？我不希望有任何性能影响。但是它的可维护性较差，这对大型应用程序很重要。那么，对于大型应用程序，建议采用什么方法呢？基于属性的查找的系统方法不一定要使用Synthetic data testid，但它是很好的首选方法。这也使您的代码准备好进行e2e测试，这对于大型应用程序来说是必须的

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