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

我做了两个版本的相同的简单测试，我正在寻找更好的一个。唯一的区别是第一个返回HTML代码

：：name:：

，第二个返回-JSX

{name}

。我相信这种呈现测试的目标是证明从呈现中返回正确的HTML，因此我相信第一种方法更准确。想法

第1版：

const prop = {name: '::name::'}
const wrapper = shallow(<Component prop={prop} />)

expect(wrapper.equals(
  <div>
    <div>::name::</div>
  </div>
)).toEqual(true)

const prop={name:'：：name:'}
常量包装器=浅（）
expect（wrapper.equals）(
：：姓名：：
)).toEqual（对）

第2版：

const name = ::name::
const wrapper = shallow(<Component prop={name: name} />)

expect(wrapper.equals(
  <div>
    <div>{name}</div>
  </div>
)).toEqual(true)

const name=：：name:：
常量包装器=浅（）
expect（wrapper.equals）(
{name}
)).toEqual（对）

反应单元测试中的第一条拇指规则-仅检查条件

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

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

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

const示例=（{isFoo}）=>{
返回(
{isFoo？：}
);
};

现在，这应该作为一个单元测试

const wrapper = shallow(<Example isFoo={true} />);

expect(wrapper.contains('Foo')).toEqual(true);
expect(wrapper.contains('Bar')).toEqual(false);

const wrapper=shallow（）；
expect（wrapper.contains（'Foo'））.toEqual（true）；
expect（wrapper.contains（'Bar'））.toEqual（false）；

---

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

因为

：：name:：

仍然是硬编码的

.equals（）

不检查它是否是对同一变量的引用

所以，仍然无法验证

name

是否来自于道具，并且不是与测试值相同的硬编码

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

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

---

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

>您不必测试您传递的相同值是否在div中呈现，因为这是库行为，并且React已经过测试以正确呈现道具值。但是您可能需要测试在JSX中键入的变量是否正确