Sarah Sarah - 1 year ago 88
React JSX Question

How to see what the rendered React component looks like in the Jest unit test?

I'm trying to run a test for the React component. I need to check how it looks like after rendering. Tried to use

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';


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

I'm getting the following error:

Invariant Violation: There is no registered component for the tag 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?

Answer Source

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 />);

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download