- World-Wide-Web Codes:
- The roadmap to learn React
- React.js
- React Components
- React Virtual DOM
- React Lifecycle
- React State
- React Props
- React Render
- React JSX
- React Function Component Example
- React Function Component Props
- React Function Component:State
- React Arrow Function Component
- React Stateless Function Component
- React Pure Component
- React Function Component: Export & Import
- React Controlled vs Uncontrolled
- React Hooks
- React HOC
- React + Redux
- Modern React Testing [Jest]
The roadmap to learn React
What testing means?
In tech jargon testing means checking that our code meets some expectations. For example: a function called "transformer" should returns the expected output given some input.
There are many types of testing and soon you'll be overwhelmed by the terminology, but long story short tests fall into three main categories:
- unit testing
- integration testing
- UI testing
In this Jest tutorial we'll cover only unit testing, but at the end of the article you'll find resources for the other types of tests.
Jest ships as an NPM package, you can install it in any JavaScript project. Jest is one of the most popular test runner these days, and the default choice for React projects.
If you're writing a web application a good starting point would be testing every page of the app and every user interaction. But, web applications are also made of units of code like functions and modules that need to be tested too.
There are two scenarios most of the times:
- you inherit legacy code which comes without tests
- you have to implement a new functionality out of thin air
What to do? For both cases you can help yourself by thinking of tests as of bits of code that check if a given function produces the expected result. Here's how a typical test flow looks like:
1-import the function to test
2-give an input to the function
3-define what to expect as the output
4-check if the function produces the expected output
Really, that's it. Testing won't be scary anymore if you think in these terms: input - expected output - assert the result.
Now hands on Jest!
Next up install Jest with: Comming Soon ....
- unit testing
- integration testing
- UI testing
In this Jest tutorial we'll cover only unit testing, but at the end of the article you'll find resources for the other types of tests.
Jest Tutorial: what is Jest?
Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and structuring tests.Jest ships as an NPM package, you can install it in any JavaScript project. Jest is one of the most popular test runner these days, and the default choice for React projects.
First things first: how do I know what to test?
When it comes to testing, even a simple block of code could paralyze beginners. The most common question is "How do I know what to test?".If you're writing a web application a good starting point would be testing every page of the app and every user interaction. But, web applications are also made of units of code like functions and modules that need to be tested too.
There are two scenarios most of the times:
- you inherit legacy code which comes without tests
- you have to implement a new functionality out of thin air
What to do? For both cases you can help yourself by thinking of tests as of bits of code that check if a given function produces the expected result. Here's how a typical test flow looks like:
1-import the function to test
2-give an input to the function
3-define what to expect as the output
4-check if the function produces the expected output
Really, that's it. Testing won't be scary anymore if you think in these terms: input - expected output - assert the result.
Now hands on Jest!
Setting up the project
As with every JavaScript project you'll need an NPM environment (make sure to have Node installed on your system). Create a new folder and initialize the project with:Next up install Jest with: Comming Soon ....