时间戳

首页 > 解决方案 > React浅层测试中硬编码的预期字符串与提取的变量

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

问题描述

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

标签： reactjsunit-testingtesting

解决方案

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);

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

推荐阅读