使用 Enzyme 和 Jest 测试 React 组件中包含的文本

Question

对于我的 React 组件，我有以下内容：

const ArchiveButton = ({collection, onClick}) => {

    return (
        <span>
            { collection.archived &&
            <Button bsStyle="link" onClick={onClick}><i className="fa fa-rotate-left" />&nbsp;Unarchive</Button>
            }
            { !collection.archived &&
            <Button bsStyle="link" onClick={onClick}><i className="fa fa-archive" />&nbsp;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/);

虽然不太确定，但似乎有点不对劲。谢谢！

Answer 1

这是因为您使用的是浅渲染，所以您的嵌套 Button 组件没有被渲染。如您所见，您可以访问嵌套的组件道具来测试您传递给它的值。如果您更喜欢呈现按钮内容，请改用普通呈现。

请注意，嵌套的 Button 不是普通的 DOM 元素，即使您使用浅层渲染，它也会被渲染，但它本身是一个组件。

如果您考虑一下，如果您在您的案例中不使用浅层渲染，那么您实际上并没有对您的组件进行单元测试，因为您还在断言 Button 组件的某些内容。如果您使用浅层渲染并访问嵌套组件的 props，您实际上只是在测试您的代码是否使用正确的参数调用 Button 组件，而您没有对 Button 组件的渲染方式做出任何假设。这通常是您希望在单元测试中执行的操作。

使用 Enzyme 和 Jest 测试 React 组件中包含的文本

Testing for text contained in React component with Enzyme and Jest

reactjs

jestjs

enzyme