Next.js Typescript Project Setup with React Testing Library -- Part 2: Testing

In this video, we will be setting up Jest with React Testing Library

[element]

That is literally perfect config. I lost couple of hours looking for implementation nextJs with TS with react testing library :) Thanks for this!!

[DjWizard]

Nice one just upgrading my project! Thanks a lot!

[SnapLoLisHot]

Hey Leo, thanks for the clear and cut to the chase commentary. I'm having issues getting render tests for pages to work. Imports not being correct etc... Do you have an example?

[roobs]

For the helloWorld test i got an error saying "document is not defined". Adding "--env=jsdom" to the test scripts solved the problem.

[lawrenceughonu]

Leo Roese please can you update the file in the GitHub repo so that it would be the same as what is in the video

[loganj]

I got stuck like some people got.

FAIL src/add.test.ts
● Test suite failed to run

TypeError: Cannot destructure property 'AsymmetricMatcher' of as it is undefined.

at Object.<anonymous>

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.252 s
Ran all test suites.

I got this error when I test the add function with jest.
Do you know any about it?
I fellow your video and even copy the code from github and paste it.

[lucasteixeira]

After adding the second test I am getting this error:

TypeError: Cannot destructure property 'DOMElement' of as it is undefined.

[CodeDunks]

Hey all, if you run into the TypeError: Cannot destructure property 'AsymmetricMatcher' of as it is undefined. as some have mentioned in the comments, be sure to try the following. Also read more for information about "ReferenceError: document is not defined" error

AssymetricMatcher Error Fix

1. rm -rf node_modules package-lock.json (yarn.lock if using yarn)
2. npm install (yarn install)
3. reload vscode window

Seems something gets messed up in the dependencies installing for jest and testing library.

ReferenceError: document is not defined fix

Another issue it seems that when running with upgraded dependencies is that you might run into a "ReferenceError: document is not defined". This can be fixed with the following steps
1. yarn add -D jest-environment-jsdom
2. add testEnvironment: "jest-environment-jsdom" to your jest.config.js

I've also gone ahead and updated the github repo with newest changes as well as up to date packages for next 11, jest27 etc