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

此后没有什么大不同

::name::仍然是硬编码
.equals()不会检查是否引用了相同的变量。

因此，仍然没有办法验证name是否来自道具，是否没有等同地硬编码为测试值。

最好在测试中更新道具并确保组件已更改：

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

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

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

2 个答案: