A code is worth a thousand words

React: Wait for full render in snapshot testing

You are here

If you use full render not shallow in your tests, your tests might be rendered before the actual component and its subcomponents are fully loaded. In that case you need to delay the output, while enzyme is great, it will sometimes still do the snapshot comparison too early. We need to add an event so the snapshot will be after all the events in the que. For this an easy fix is to use "setTimeout".

Source code viewer

import React from 'react';

import{ mount } from 'enzyme';

import toJson from 'enzyme-to-json';

describe('<MyComponent />',()=>{

it('My test that will do the snapshot after full render.',(done)=>{

const wrapper = mount(<MyComponent />);

setTimeout(()=>{

// Use enzyme-to-json for pretty printed snapshot, for easy diff in the future.