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

【问题标题】：Hardcoded expected string vs extracted variable in React shallow testReact浅层测试中硬编码的预期字符串与提取的变量
【发布时间】：2023-03-08 07:31:01
【问题描述】：

我做了两个相同的简单测试版本，我正在寻找更好的版本。唯一的区别是第一个返回 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)

【问题讨论】：

标签： reactjs unit-testing testing

【解决方案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);

注意：语法可能会有所不同，但你明白了要点。

【讨论】：

> 您不必测试您传递的相同值是否在 div 中呈现，因为这是库行为，并且 React 已经过测试以正确呈现 props 值。但是你可能想测试一下你在 JSX 中输入了正确的变量

【解决方案2】：

没有太大区别

::name:: 仍然是硬编码的
.equals() 不检查它是否是对同一个变量的引用。

因此，仍然无法验证 name 是否来自 props 并且没有与测试值同等硬编码。

最好只更新测试中的 props 并确保组件已更改：

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

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

【讨论】：