Add feature to take a snapshot movie

[wilfriedbarth]

Do you want to request a feature or report a bug?
Feature

What is the expected behavior?
Add feature to take a snapshot movie. This idea is inspired by Rogelio Guzman's talk Jest Snapshot's and Beyond - React Conf 2017, 22:05 onward. I was searching online for it and couldn't find it. I think it would be cool if we started exploring ideas along those lines (jest snapshots over time).

The main use case I can think of would be async integration tests where you would want to capture snapshots of the renders over a certain timeframe. Example: You have mocked out your api (nock, supertest, etc) and you want to check that your component renders a loader / spinner followed by the component once data is retrieved. In my experience, this can be painful because you 1) have to flush all the promises to ensure you don't take a snapshot before data is received (see #2157), and 2) have to wait for your state management library (mobx / redux) to update and the component to rerender before taking a snapshot (see mobxjs/mobx-react#194).

Instead, perhaps you could take a snapshot movie of the renders and, in this example, capture frames for the loading state and the finished state. In addition, perhaps you might capture unnecessary / undesirable renders that you wouldn't have seen before. The hacky way I've implemented it before using jest and enzyme was to compare the json of the wrapper at set intervals and take snapshots (movie frames) when the json changed.

Below is an idea for the API (pseudocode, some functions like onRender for don't exist, purely to get idea across):

import React from 'react';
import App from '../App';
import { mount } from 'enzyme';

describe('App', () => {
  it('takes a movie', (done) => {
    const wrapper = mount(<App />);
  
    expect(wrapper).toMatchMovie(() => {
       // onRender would be called whenever there was a new render.
       // Probably would have to be provided by Enzyme or React...
       wrapper.onRender(() => {
         expect(wrapper).toMatchMovieSnapshot();
       });
    }, 2000, done);
  });
});

Perhaps it is impractical to implement as it depends on React / Enzyme providing a new API (a listener for renders / render history), but at this stage my intent is to spark a discussion and gauge interest in the feature. We'll see where it goes from there!

[cpojer]

This can be built using higher level APIs and doesn't have to be in Jest.

cc @rogeliog

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.