kentcdodds / kentcdodds/jest-glamor-react
Snapshot testing of DOM element clears out that elements children
- 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
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