Next.js with React Testing Library, Jest, TypeScript

Thanks for this Dave. The Using App Router docs at Vercel still do not have specific Testing documentation in the Optimizing section as of Next version 14.0.3 and I was struggling getting Jest and React Testing Library configured properly.

Why do we have jest.setup.js?

Works fine with Next 14.0.1. just nuke yarn-error, yarn.lock and node-modules/ and install everything again before run 'yarn jest'.

Replace jest.setup.js with the line "import '@testing-library/jest-dom'" because extend-expect is not there anymore

Oh, thank you so much! Really saved my day❤ I don't know about others, but for me, working with typescript sometimes can be very head-scratching and I myself fell into quite a few traps😂 And contents like setting configs or some other little tricks can be very very helpful, just like what this video demonstrates. Thank you again and hopefully we could watch more great video in this channel

It would be nice to see some unit testing in react native using react native library and jest.Also love your explanations.

I am curious, why is your test extension `tsx` as opposed to just `ts`? Is it because you did not create it as a spec file?

npm i -D @testing-library/[email protected] @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest

You are the best!!! Thank you! 😍😍😍

Hey Dave! I'd love some react testing videos. Finding resources to effectively explain testing react hooks and redux usages are few and far between!

thx

yes sir we need react testing video

How comes you are using extend-expect when it was removed in @testing-library/jest-dom v6.0?

I've been fighting jest, typescript, webpack, nextjs, and vite the whole day trying to set up a test runner for a nextjs project created with create-t3-app. The pain in the js ecosystem is real. I hope I can just use bun for everything soon.
Anyways, this video got me the closest to a perfect setup just a tiny bit of googling aside from the instructions in this video got jest+RTL working! Thank you!

That rolling back for @testing-library/[email protected] saved me hours of searching. Thanks a lot

not gonna lie, all the switching from versions makes everything so uncertain

I encountered the error " ReferenceError: Can't find variable: document
at render ....". I already set testEnvironment: "jest-environment-jsdom". Anybody can help me ? Thanks

__tests__/productImages.test.tsx
● Test suite failed to run

Cannot find module '@testing-library/jest-dom/extend-except' from 'jest.setup.js'
please help

I was really glad to find this video but when I went through it, I realized things are just too problematic to even set up Jest with the Next 13 right now ... conflict after conflict ... will get back when the issues are resolved ...

HI Dave, thanks a lot for the jest video as you asked Could you Please do react vite vitest video on a big react project?? like the blog project you had in your redux video?? want to see how it works compared to jest and learn more on how it does crud on frontend?

codium tutorials please. thats a great tool n ure a great teacher. win || win

Hello! This is a very nice video for beginners learning about the basics of testing. I came here with a bit more experience and I can't even get one test passing since next 13. The useRouter hook just keeps throwing the same error: " invariant expected app router to be mounted". If you don't have an idea yet about your next video, showing how to setup the tests when using "next/navigation" package should be a good one, not "next/router" (this is important) 👌Thanks for the content

Incase anyone is getting this annoying error.

Details:

/<path>/node_modules/uuid/dist/esm-browser/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';


Just add this to your jest.config file

....

moduleNameMapper: {
"^uuid$": "uuid"
}

Full code would look like

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

testEnvironment: 'jest-environment-jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
preset: 'ts-jest',
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
transformIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/cypress/'],
moduleNameMapper: {
"^uuid$": "uuid"
}
}

damn next.js with this versions and all that libraries
struggled a lot

thank you mate <3

thank you!

Mr Dave Can You Give The Effect Filter Of Your OBS

Thank you! I really hope you produce more unit-testing videos with React!

Sir please make videos django course from beginniner to advance.

Hi Dave .. Thank you so much about everything .. I learned from you alot of things not just programming .. I learned from you english language also Your accent very clear .. I have one request please .. Can you start with SQL I need this for my work and I need to understand it using your explanation

Thanks
Hamza

Great! Waiting for next video.

Bruh half the video was just setup and configurations. This is why no one likes to do testing 😂

Can you do it more testing with react❤❤❤

Looking forward to more videos on testing, thanks Dave.

Nice tutorial,Thanks

dear dave, why in nextjs 13.4 app directory we have several errors for testing aplication?

Yet another great video.

Please, please... make a video about How to test React) you are a great teacher... do you work offline as a teacher?)

Hey Dave! You've are a saviour/ultimate mentor for those who are diving deep into Next.js. Appreciate your progressive content. Thank you.

Thanks for this awesome video
i was struggling to understand testing with nextjs ❤

Hey Dave ! any thoughts about a testing course ? Like, what is mock, spy, stub, e2e and unit testing...Maybe a little teoric and practice introduction to these subjects, as a beginner I feel that will be a great adittion to my studies, recently I came across many videos about that.

Thank you for your teachings ! Helped me a lot to learn Nextjs

This is what we want !!!! Dave you are my hero! You always provide useful and advanced stuff !!! 👍👍

Hi Dave,

I am doing some of your other videos, and a little something I wanted to thank you for: Thanks for explaining the little things that you do and not just doing them (e.g. Ctrl + B to hide the file tree, etc etc). These tidbits make the learning journey more fun, clearer, and basically make me feel more involved in what's happening, which makes me want to keep at it, so muchas gracias ;-)

Finally, we need more of this Dave, keep it up, I want to question you about two things:

The vscode extension you're using for the icons

When selecting the pages and not the app features in next project inititializing, will it work with same new SSR and SSG functionalities or we will use the getStaticProps, getServerSideProps keywords, thanks!

Super Love it thankyou! I used Chai with Hardhat. Yeeew lol...

Awesome stuff man

Ever thought of adding React native (mobile) tuts to your channel Dave?

Hey Dave can you teach us auth0 for next js 13 ?

I wonder why Nextjs does not come with testing like create react app comes… it would help a lot

Thank you dave, i hope you will continue this testing video as series, it will help so much❤