如何查看Jest單元測試中呈現的React組件的外觀？

Question

我正在嘗試對React組件進行測試。 我需要檢查渲染后的外觀。 嘗試使用ReactDOMServer.renderToString()但失敗。 這是代碼：

import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import React from 'react/lib/ReactWithAddons';
import ReactDOMServer from 'react-dom/server';

jest.mock('react-dom');
jest.mock('react/lib/ReactDefaultInjection');

describe('NewRec component', () => {
    const component = shallow(<NewRec />);
    it('returns true if blah blah', ()=>{
        var htmlstring = ReactDOMServer.renderToString(<component />);
    });
});

我收到以下錯誤：

Invariant Violation: There is no registered component for the tag component

我試圖這樣稱呼它： var htmlstring = ReactDOMServer.renderToString(component); 然后我得到這個錯誤：

Invariant Violation: renderToString(): You must pass a valid ReactElement.

有誰知道問題出在哪里？

Answer 1

Jest中有快照功能 ，它將快照樹存儲為文件。 請注意，您還必須安裝Enzyme-to-json才能將酶提純的成分轉換為快照方法可以理解的內容。

import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';

describe('NewRec component', () = > {
  it('returns true if blah blah', () = > {
    const component = shallow(<NewRec />);
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

這將在測試文件夾的__snapshot__文件夾中創建一個新文件，您可以在其中檢查渲染的結果。 每次您重新運行測試時，都會根據快照對組件進行測試。

Answer 2

如果您不使用酶，那么也可以使用Facebook的react-test-renderer ，它甚至更簡單：

import React from "react";
import renderer from "react-test-renderer";

test("Test 1", () => {
  const component = renderer.create(
    <TestItem />
  );

  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});