如何在Jest单元测试中查看呈现的React组件的外观?

问题描述：

我正在尝试对React组件进行测试.我需要检查渲染后的外观.尝试使用ReactDOMServer.renderToString()，但失败.这是代码:

I'm trying to run a test for the React component. I need to check how it looks like after rendering. Tried to use ReactDOMServer.renderToString() but it fails. Here is the code:

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);然后出现此错误:

I tried to call it like: var htmlstring = ReactDOMServer.renderToString(component); then I get this error:

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

有人知道问题出在哪里吗?

Does anyone knows where the problem is?

答

有快照功能，它将渲染的树存储为文件.请注意，您必须安装酶到json 并转换酶将成分转化为快照方法可以理解的东西.

There is the snapshot feature in Jest where it stores the rendered tree as a file. Note that you have to install enzyme-to-json as well to convert the enzyme rendered component to something the snapshot method can understand.

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__文件夹中创建一个新文件，您可以在其中检查渲染的结果.每次您重新运行测试时，都会针对快照对组件进行测试.

This will create a new file in __snapshot__ folder in your test folder, where you can inspect the rendered result. Every time you rerun the test, the component will be tested against the snapshot.

如何在Jest单元测试中查看呈现的React组件的外观?

相关推荐