Setup walkthrough for a Next.js project with Typescript, ESLint, Prettier, Jest, and React Testing Library. In this video, we will be setting up Jest with React Testing Library GitHub Link: github.com/leoroese/blog-tube...
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?
Hey all, if you run into the TypeError: Cannot destructure property 'AsymmetricMatcher' of '_prettyFormat.default.plugins' 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
Hey Leo, I tried going over these steps multiple times but was still running into this issue. What worked for me was to remove the moduleDirectories: [...] line from the jest.config.js I haven't ran into any problems since. I don't know if it's a temporary hack but I figured I should post it here in case anyone is having a similar issue. Thanks for all your videos as well. Some of the highest quality stuff out there!
After adding the second test I am getting this error: TypeError: Cannot destructure property 'DOMElement' of '_prettyFormat.default.plugins' as it is undefined.
Shoot me an email at documentationnerds@gmail.com and we can try and work through it if this still persists. Maybe try and reload your editor window I’ve honestly never seen that type of error before
@@CodeDunks I am having exactly the same problem. Additional info: at Object. (node_modules/@testing-library/dom/dist/pretty-dom.js:33:3) at Object. (node_modules/@testing-library/dom/dist/config.js:11:18) Followed carefully the instruction and have exactly the same code as in the guide
@@girornsveinsson7970 Hey So I was able to replicate the issue. It seems that something might have happened while installing dependencies that caused your node_modules to get all messed up. To fix it a couple of things. 1. Make sure you only have one of either a package-lock.json or yarn.lock 2. rm -rf node_modules 3. yarn or npm install, whichever you are using This should reinstall all the dependencies correctly and then fix you being able to run your tests.
@@CodeDunks Still having problems - possibly because I have made a mistake somewhere in the process. Do you have this in GitHub? - The link with the video is broken.
@@girornsveinsson7970 Yes my apologies, I implemented Lerna and the path changed. Link is here github.com/leoroese/blog-tube/tree/main/packages/next-ts-frontend. Let me know if you still have some issues
I got stuck like some people got. FAIL src/add.test.ts ● Test suite failed to run TypeError: Cannot destructure property 'AsymmetricMatcher' of '_prettyFormat.default.plugins' as it is undefined. at Object. (node_modules/jest-diff/build/index.js:92:3) 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.
After copying the code down, did you remove your node_modules and yarn or package lock? Then reinstall using a fresh install such as “yarn install” also make sure you have the prettier extension installed enabled as well as the eslint extension installed and enabled and restart vscode. This was how I fixed it on my machine. Sorry you are running into this issue
@@CodeDunks I use npm and I did what you said, delete node_moduels, lock json and reinstall the package.json but still the error happens. I'll try it from the scratch and let you know.
@@CodeDunks I start over everything but still it shows this. TypeError: Cannot destructure property 'AsymmetricMatcher' of '_prettyFormat.default.plugins' as it is undefined. It looks like something is wrong or didnt set up about typescript..? I have no idea if I have to give up jest in this moment
@@loganj6203 Hey MWZ, so I followed along this morning with my article and ran into the same issue that you are mentioning. If you don't want to go through the video every time you can also go to the article this video is based on here: documentationnerds.com/blog/tech/setup-next-frontend-with-typescript-eslint-prettier-jest-and-react-testing-library I was able to solve this locally by doing the following 1. rm -rf node_modules package-lock.json (yarn.lock if using yarn) 2. npm install (yarn install) 3. Run yarn test again should work It seems the dependency install ordering gets messed up for some reason
