尽管产生了相同的快照，酶包装器却没有达到开玩笑的平等

Question

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

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

在测试中，我安装了这个组件两次，一次省略了可选的 prop，一次指定了 prop 的默认值：

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

我正在努力找出这个测试用例失败的原因。

• 我错过了什么？
• 为什么尽管有重复的快照，但此相等性检查仍会失败？
• 是否与enzyme-to-json 中的toJson 实用函数有关？
• 会不会和enzyme本身有关？

Answer 1

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

最高级别的两个对象的简化视图返回no visual difference，但如果您深入一级node 键，您可以开始看到差异：

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