React浅层测试中硬编码的预期字符串与提取的变量

Question

我做了同一个简单测试的两个版本，我正在寻找更好的版本。唯一的区别是第一个返回HTML代码<div>::name::</div>，第二个返回JSX<div>{name}</div>。我相信这种呈现测试的目标是证明从呈现中返回了正确的HTML，所以我相信第一种方法更准确。想法？

版本1:

const prop = {name: '::name::'}
const wrapper = shallow(<Component prop={prop} />)
expect(wrapper.equals(
<div>
<div>::name::</div>
</div>
)).toEqual(true)

版本2:

const name = ::name::
const wrapper = shallow(<Component prop={name: name} />)
expect(wrapper.equals(
<div>
<div>{name}</div>
</div>
)).toEqual(true)

Answer 1

React单元测试中的第一条经验法则-只检查条件。

这意味着，当您传递一个道具并在div中渲染该道具时，它将被渲染。您不必测试是否在div中呈现了您传递的相同值，因为这是库行为，并且React已经过测试，可以正确地呈现props值。

相反，您的测试用例应该关注条件语句和逻辑。例如

const Example = ({ isFoo }) => {
return(
<div>{isFoo ? <Foo /> : <Bar />}</div>
);
};

现在这应该作为进行单元测试

const wrapper = shallow(<Example isFoo={true} />);
expect(wrapper.contains('Foo')).toEqual(true);
expect(wrapper.contains('Bar')).toEqual(false);

注意：语法可能会有所不同，但您可以了解要点

Answer 2

自以来没有太大差异

1. ::name::仍然是硬编码

2. .equals()不检查它是否是对同一变量的引用。

因此，仍然无法验证name是否来自道具，并且没有按照测试值进行同等的硬编码。

最好只是更新测试中的道具，并确保组件已更改：

wrapper.setProps({prop: {name: 'anotherName'}});
expect(wrapper).toMatchSnapshot();

顺便说一句，你最好依靠toMatchSnapshot()，而不是手动比较。