如何在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

有开玩笑的snapshot feature，它存储的渲染树作为一个文件。请注意，您还必须安装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(); 
});