React testing with Jest

Running test with Jest

There is a number of javascript test frameworks. To test vanilla javascript applications, a popular choice is Mocha. Jest is another popular choice for react developers. Jest was developed by facebook like react and is an open source project. Jest comes preinstalled when you generate a react project using the

create-react-app //command line tool.

If you generated a react project using the command above all you have to do to run the test is use the command

npm test 

Several things will occur when npm test is executed.

1. Jest is executed: create-react-app by default uses Jest as a testing framework.

2. Test files are located: Jest will automatically search for test files in the project directory. It searches for files with the .test.js or .spec.js extension in the src directory and its subdirectories,this is a common convention used to indicate that the file contains test code for the corresponding JavaScript file..

3. Test are executed: Jest will execute all test files & runs the test cases defined within those files. It will provide a test runner that displays results in the console, showing which test pass & which have fail. It will also provide failing assertions or errors during the test execution.

4. Test watch mode: Jest runs watch mode by default when you run npm test, but it is optional. Watch mode means that Jest will keep running & watches for changes in your test file or source code. When it detects any modifications it re-runs the affected tests automatically.

5. Code coverage: By default create react app is configured to generate code coverage reports. When npm test is executed, Jest will also collect information about how much your code is covered by the tests. It will generate a coverage report that provides insights into areas of your code that are tested & those that are not tested.

The npm test command will also execute the test script in the package.json file in your project directory. create-react-app sets up a default configuration where the test script is associated with the command to run the test suite using Jest. This configuration includes a predefined command that is associated with the test script in the project's package.json file. The test script is like a shortcut or a predefined command that you can run using npm test.

The default test script in package.json of a Create React App project typically looks like this:

//json

"scripts": {
  "test": "react-scripts test"
}

This script, in turn, runs the command associated with it, which is typically react-scripts test. Behind the scenes, npm test typically invokes react-scripts test to execute the test scripts defined in the project. So both npm test and react-scripts test can be used interchangeably to run tests in a Create React App project.

Example of Jest test

test("displays the text 'hello world'", () => {
  render(<Article />);

  expect(screen.queryByText("hello world")).toBeInTheDocument();
});

The test example above is doing the following:

• render: The render method is used to render a React component inside the testing environment or virtual DOM. Since the Jest test don't run in a actual browser but instead run inside JSDOM which mimics the behavior of a browser's DOM. JSDOM allows Jest to simulate a browser like environment within node. This enable test to interact with & manipulate the DOM. You can also use DOM related APIs such as document, window, querySelector in your test script. By default Jest sets up JSDOM for each test file.

• expect: The expect method used to define assertions and make comparisons between values. You can use various matchers with the expect method to check if a certain condition is met. For example in the code above we are using the custom JSDOM matcher toBeInTheDocument which checks if the element is present in the DOM. You can use this matcher to verify if an element if rendered & exist in the current document.

• screen: The screen object is used to interact with the rendered components. It also provides helper methods to query the DOM for elements we expect to have been rendered. screen allows convenient way to access elements without having to rely on the document object directly. In the above example the line screen.queryByText('hello world') searches the virtual DOM for some element that has the text content "hello world". If no element is found, it will return null.

Conclusion

In conclusion, React testing with Jest provides a powerful and efficient way to ensure the quality of your application. With Jest's comprehensive testing framework and Reacts testing utilities, you can easily write and execute tests to validate the behavior and functionality of your React components. - Happy testing!