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

Question

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. Her

Answer 1

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();
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

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.