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组件。如果使用浅层渲染并访问嵌套组件的道具，那么您实际上只是测试您的代码是否使用正确的参数调用Button组件，并且您不会对Button组件的呈现方式做出任何假设。这通常是您在单元测试中想要做的事情。

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

1 个答案: