reactjs - 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 单元测试中的第一条经验法则 - 仅检查条件。

这意味着，当您传递一个 Prop 并在 div 中渲染 Prop 时，它就会被渲染。您不必测试您传递的相同值是否在 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);

注意:语法可能有所不同，但您明白了要点。