尽管产生了相同的快照，但酶包装器在开玩笑的平等性上失败了

Question

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

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()，但这有点用词不当。它不 return 返回 JSON，它实际上 return 返回一个相当复杂的对象，然后 Jest toMatchSnapshot() 转换成 JSON快照文件。

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

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

尽管产生了相同的快照，但酶包装器在开玩笑的平等性上失败了

enzyme wrappers fail jest equality despite producing identical snapshots

snapshot

reactjs

jestjs

enzyme