我正在尝试对 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.
有谁知道问题出在哪里吗?
最佳答案
有 snapshot feature在 Jest 中,它将渲染的树存储为文件。请注意,您必须安装enzyme-to-json以及将 enzyme 渲染的组件转换为快照方法可以理解的东西。
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__
文件夹中创建一个新文件,您可以在其中检查渲染结果。每次重新运行测试时,都会根据快照测试组件。
关于javascript - 如何在 Jest 单元测试中查看渲染的 React 组件是什么样子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40504222/