kentcdodds / kentcdodds/jest-glamor-react

Snapshot testing of DOM element clears out that elements children

Open
#39 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
97
Forks
21
PR merge metrics
No merged PRs in 30d

Description

* `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](https://github.com/pbomb/null-after-snaphot)

What you did:

Wrote simple component and test using react-testing-library. Asserting snapshot using:
```js
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](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`.

Contributor guide

Open the contributing guide

Research direction

Start with the linked null-after-snaphot reproduction and its test using react-testing-library, then reproduce the failure around expect(container.firstChild).toMatchSnapshot(). Trace the interaction between snapshot comparison and cleanup, and confirm the fix by ensuring container.firstChild remains present and cleanup no longer reports DOM child errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.