Question

这是一个简单的React组件，带有默认值的可选prop：

class Test extends Component {
  static defaultProps = {
    role: 'default'
  }
  render() {
    return (
      <div role={this.props.role}>
        { this.props.children }
      </div>
    );
  }
}

在测试中，我将两次安装此组件，一次省略了可选的道具，一次指定了道具的默认值：

import toJson from 'enzyme-to-json';
import { mount } from 'enzyme';
...
test('should render the same tree', () => {

  const a = mount(<Test />);
  const b = mount(<Test role="default" />);

  expect(toJson(a)).toMatchSnapshot();  // passes
  expect(toJson(b)).toMatchSnapshot();  // passes
  expect(toJson(a)).toEqual(toJson(b)); // fails
});

出乎意料的是，expect(toJson(a)).toEqual(toJson(b));失败了。但是，Jest确认生成的树是相同的，因为它记录了no visual difference消息：

  ● should render the same tree

    expect(received).toEqual(expected)

    Expected value to equal:
      <Test role="default"><div role="default" /></Test>
    Received:
      <Test role="default"><div role="default" /></Test>

    Difference:

    Compared values have no visual difference.

      43 |       expect(toJson(a)).toMatchSnapshot();
      44 |       expect(toJson(b)).toMatchSnapshot();
    > 45 |       expect(toJson(a)).toEqual(toJson(b));
         |                         ^
      46 |     });
      47 | 
      48 |

此外，正如预期的那样，对于省略了可选属性以及为其提供默认值的情况，这会产生相同的快照：

exports[`should render the same tree 1`] = `
<Test
  role="default"
>
  <div
    role="default"
  />
</Test>
`;

exports[`should render the same tree 2`] = `
<Test
  role="default"
>
  <div
    role="default"
  />
</Test>
`;

我正在努力弄清楚为什么这个测试用例失败了。

我想念什么？
为何尽管快照重复但此相等性检查仍失败？
是否可以与toJson中的enzyme-to-json实用工具功能相关？
它可能与enzyme本身相关吗？

Answer 1

enzyme-to-json中的辅助函数称为toJson()，但这有点用词不当。它不会返回JSON，而是实际上返回一个非常复杂的对象，Jest toMatchSnapshot()然后将其转换为最终在快照文件中的JSON。

两个对象在最高级别的简化视图将返回no visual difference，但是如果您更深入node键，您可以开始看到不同之处：

expect(toJson(a).node).toEqual(toJson(b).node);

尽管产生相同的快照，酶包装器也无法实现开玩笑的平等性

1 个答案: