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`...

那将起作用。另外，您可以使用可能使用displayName字符串的find()，因此可以

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

然后进行测试：

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

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

系统方法

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

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

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

1 个答案: