反应成分浅测试不通过比较值没有视觉差异

Question

我使用jest和react-test-renderer/shallow来测试我的反应组件。

jest给我Compared values have no visual difference.

我认为received与expected相同。但是jest没有通过单元测试。

这是测试结果：

● PanelHead test suites › t-1

    expect(received).toEqual(expected)

    Expected value to equal:
      <h3 className="panelTitle">hot search</h3>
    Received:
      <h3 className="panelTitle">hot search</h3>

    Difference:

    Compared values have no visual difference.

      at Object.<anonymous> (src/components/PanelHead/__tests__/index.test.jsx:14:39)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:109:7)

  PanelHead test suites
    ✕ t-1 (20ms)

这是我的组件jsx：

return (
    <div className={style.panelHeading}>
      <h3 className={style.panelTitle}>
        {props.title}
        {props.subTitle && <small className={style.panelSubTitle}>{props.subTitle}</small>}
      </h3>
    </div>
  );

和我的测试代码：

describe('PanelHead test suites', () => {

  it('t-1', () => {

    const renderer = new ShallowRenderer();
    renderer.render(<PanelHead title="hot search"/>)
    const result = renderer.getRenderOutput();

    expect(result.type).toBe('div');
    expect(result.props.children.type).toBe('h3');
    expect(result.props.children.props.className).toBe('panelTitle');

    expect(result.props.children).toEqual(<h3 className="panelTitle">hot search</h3>);

  });

});