Snapshot testing of DOM element clears out that elements children

[pbomb]

• jest-glamor-react version: 4.3.1
• node version: 8.11.2
• npm (or yarn) version: yarn 1.7.0

https://github.com/pbomb/null-after-snaphot

What you did:

Wrote simple component and test using react-testing-library. Asserting snapshot using:

expect(container.firstChild).toMatchSnapshot();

What happened:

After this line executes, for some reason container.firstChild becomes null. It's not null before the snapshot is compared. This causes errors to be output when running cleanup from react-testing-library after each test because React complains that the DOM node we're trying to unmount doesn't seem to have the expected children.

Reproduction repository:

https://github.com/pbomb/null-after-snaphot

Problem description:

It seems that something within jest / jsdom / jest-glamor-react is setting the DOM node to null somehow.

Suggested solution:

Not really sure, unfortunately what the root cause is. I don't really even understand how the container object's firstChild property is getting set to null.

[kentcdodds]

I thought I'd fixed this but maybe not. I'm not sure what's causing it but it seems like cloning the element fixes the issue. Could you try that and if it works we can do that internally.

[pbomb]

How do you propose cloning the element? And I'd have to do that from within jest-glamor-react, right?

Additionally, we've already planned to migrate from Glamorous to Emotion, so I might end up taking that on instead of continuing down the Glamorous path as this has taken quite some time already.

[kentcdodds]

Try this:

expect(container.firstChild.cloneNode()).toMatchSnapshot();

[kentcdodds]

If that works, then we can do that for you from within jest-glamor-react.

[pbomb]

I no longer get the error output, but the cloned node doesn't get the children - it just becomes an empty DOM element.

[kentcdodds]

Hmmmm.... Well, maybe you'll be better off migration to emotion. I'm not sure I'll have time to look into this 😔