尽管产生相同的快照,酶包装器仍然无法实现笑话平等

下面是一个简单的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>
`;

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

• 我错过了什么?
• 为什么尽管有重复的快照,这个相等性检查还是失败了?
• 是否与 toJson 效用函数来自 enzyme-to-json ?
• 可能与 enzyme 它自己?