对于我的 React 组件，我有以下内容:
const ArchiveButton = ({collection, onClick}) => {
return (
<span>
{ collection.archived &&
<Button bsStyle="link" onClick={onClick}><i className="fa fa-rotate-left" /> Unarchive</Button>
}
{ !collection.archived &&
<Button bsStyle="link" onClick={onClick}><i className="fa fa-archive" /> Archive</Button>
}
</span>
);
};
我正在尝试通过为 collection.archived 传递不同的值来进行测试我想检查文本“Unarchive”与“Archive”是否存在。当我做wrapper.find('Button')时并尝试检查 .text()这只是 <Button />我想出如何测试它的唯一方法是:
const wrapper = shallow(<ArchiveButton onClick={onClick} {...props}/>);
let button = wrapper.find('Button').prop('children');
expect(button[1]).toMatch(/\sUnarchive/);
虽然不太确定，但似乎有点不对劲。谢谢!
最佳答案
这是因为您使用的是浅渲染，因此您的嵌套 Button 组件不会被渲染。正如您所看到的，您可以访问嵌套的组件属性来测试传递给它的值。 如果您希望呈现按钮内容，请改用普通呈现。
请注意，嵌套的 Button 不是普通的 DOM 元素，即使您使用浅层渲染，它也会被渲染，但它本身就是一个组件。
如果您考虑一下，如果您在您的情况下不使用浅层渲染，那么您就没有真正对您的组件进行单元测试，因为您还断言了有关 Button 组件的某些内容。如果您使用浅层渲染并访问嵌套组件的 props，那么您实际上只是在测试代码是否使用正确的参数调用 Button 组件，并且不会对 Button 组件的渲染方式做出任何假设。 这通常是您想要在单元测试中执行的操作。
关于reactjs - 使用 Enzyme 和 Jest 测试 React 组件中包含的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42890087/