Jest with React, Next JS

Intorudction:
what is jest !

• Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

what is react !

• JavaScript library for building user interfaces.

Why Test?

1) The first purpose of testing is to prevent the
reappearance of a bug that had previously been fixed.
2) Testing ensures the functionality of complex components
and modular applications.
3) Testing is required for the effective performance of a
software application or product.

Getting Started:

• First:

-Install Jest using yarn: yarn add --dev jest
-Install Jest using npm: npm install --save-dev jest
// yarn is recommended
// you can make one of this two command with any projects mentioned above

• Second:

-check your package.json file to be

• Third:

-create file called sum.js with this content

• Fourth:

-create a file named sum.test.js with this content
// it must be *.test.js

• Finally:

-run yarn test or npm run test in terminal
then you will find this message appear in the terminal
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

congrats you have learned above how to make testing with jest

• Testing Jest with React Apps:

1) npm i @testing-library/react react-test-render jest-dom --save-dev
2) create two files:

• button.js (file contain the code you wan to test it)
• button.test.js (file contain the test cases for the code)

note: the two files can be in separate places, can contain any name with this format *.js or *.test.js

3)let's look inside the JS file and the test file.

4) check your package.json as i mentioned above.
5) run npm test in your terminal.
this message will appear in the terminal
Test Suites: 1 passed, 1 total