reactTestInstance.toJSON() serializer

[mattfysh]

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

Feature

What is the current behavior?

ReactTestInstance objects cannot currently be serialized to JSON, which prevents them from being used with Jest's toMatchSnapshot when wanting to capture a partial tree snapshot

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

const testRenderer = TestRenderer.create(<MyComponent />)
const testInstance = testRenderer.root
const subComponent = testInstance.findByType('SubComponent')
expect(subComponent).toMatchSnapshot()

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

The latest version. I've checked the source code, and it may just be a case of exporting this function: https://github.com/facebook/react/blob/master/packages/react-test-renderer/src/ReactTestRenderer.js#L79-L121

[mattfysh]

For more context, this helps us to create smaller, more targeted snapshots VS. large, unwieldy and difficult to maintain snapshots. Some relevant thoughts from @kentcdodds https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca

[nhunzaker]

Very interesting, and good find! @gaearon who would be the best person to talk to about making an API change like this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[martin-braun]

It's a shame that this did not get any further attention, because I am facing the same problem, right now.

My work-around is to work with sub HTML elements, instead:

test('renders app logo correctly', () => {
    const baseElement: HTMLElement = render(<App />).baseElement;
    const element: HTMLElement = baseElement.getElementsByClassName("App-logo")[0] as HTMLElement;
    expect(element).toMatchSnapshot();
});

[acatalina]

Would it not be possible to expose toJSON like on a ReactTestRenderer?

I am having the same issues, trying to do aimed snapshots instead of container base ones. Using the implementation from toJSON find in the renderer I can transform it but relies on internals from react-test-renderer making it difficult to type and maintain.