I have a really big application with react(lot of pages, modals, tables,etc) and I'm using redux-saga for managing the state. I have a lote of stores and almost in all the components I use the useSelector method for getting the data from the store and many hooks inside them because of logic.
I want to start testing the application, specially to avoid that the app crashes when there is data undefined, invalid, etc. What library do you recommend me to apply in this case ?
React Testing Library and Jest both have different responsibilities "react testing library" is not a test runner meaning when u enter command npm test or npm run test
it is jest responsibility that collect all the files ending with .test.js and runs each test case and show pass and fail results in your console like below
react testing library provides you function to catch dom element and perform some action below are some of its function
render, fireEvent, waitFor, screen
you can also use Enzyme(another popular testing library) for such function to access dom element
EXTRA: developer often confuse among
Here Enzyme and react-testing-library are two similar things and alternatives to each other means you can use
where jest(testing-framework) will collect all .test.js files execute all the test cases and put the output in console with detail like how many pass and fail and react-testing-library or enzyme(both are testing library) will help you to perform event and accessing dom element
Common Questions/Confusions for React Developers
Create-React-App & Vite Included
What is React Testing Library?
Provides virtual DOMs for tests - Any time we are running tests without a browser, we need to have a virtual DOM so we can do things like click elements and we can see if virtual DOM behaves like it should do (like changing colour of a div on a button click and so on).
How Jest is related to React Testing Library?
Create-React-App comes with React-Testing-Library by default which also includes Jest, so you don't need to install anything else
Vite doesn't come with React-Testing-Library built-in. We need to use Vitest testing framework recommended by RTL. You can follow this video to setup React-Testing-Library with vitest
What is Enzyme and Mocha?
Enzyme (developed by Airbnb) is an alternative to React-Testing-Library (but not Jest). Remember from the above screenshot that React-Testing-Library was used to provide virtual DOM. Similar thing in some variations will be done by Enzyme. Enzyme, like RTL is also not a Test Runner, so it might need a runner like Jest.
Mocha is an alternative to Jest
Below combinations are possible
(React's recommended combination, inbuilt into Create-React-App)What are the different type of Tests?
Unit Testing
Integration Testing
Functional / Behavioural Testing
Functional testing means testing the behaviour of a function/software. We might be testing if the software does the right thing with the particular set of data. That might be an integration test as it might have to interact with different units. So the functional test can be an integration test as well
The functional test can also be a simple unit test. Let's say on a button click, the div turns red. This might be a simple unit test but still it can also be considered as a functional test as it tests for a particular behaviour of CLICK TURNS RED OR NOT
So, the functional test means, not testing the code but testing the behaviour. React-Testing-Library encourages functional tests
Acceptance/End-to-End(E2E) test
This is an End-to-End testing where we need a browser and might also need the server
Popular tools for E2E testing are Cypress and Selenium
React-Testing-Library doesn't support E2E testing
What is Mocking or Stubbing?
Let me explain this with a scenario. Let's say you have made a website for checking the climate of different cities. This app goes and gets the data (using fetch or axios library) from an external source called Weather-API. You can search for any city and it gives you proper climatic conditions.
Now we need to test this app. Let's say we are writing a unit test to test the function that has this functionality where, when a city is passed as a param it makes a call to an external API (Weather-API in this case), fetches the data and then you can write an expect statement to test if the expected value is equal to the fetched value.
If you take a closer look here, we are actually calling Weather-API in our test as well every time we run the unit test. The disadvantages of this approach are:
So what's the solution here? The solution is to mimic the response from the external API and use it in our test as the actual value and we can test this against the expected value. This is called Mocking. The reason we are doing this is we already know what the external service gives us back and we don't have to call that API anymore but simply hardcode the values as the actual values.
Reference: Testing React with Jest and React Testing - Bonnie Schulkin
Resources:
To understand the testing and mocking those tests, these are some good free youtube videos
To understand in more depth, these are some paid udemy courses
React Testing Library is not an alternative to Jest, because they need each other and every one of them has a clear task.
Jest is a test runner, which gives you the ability to run tests with Jest from the command line. In addition, Jest offers you functions for test suites, test cases, and assertions. React Testing Library, in contrast to Jest, is one of the testing libraries to test React components.
If you are using create-react-app, Jest (and React Testing Library) comes by default with the installation. If you are using a custom React setup, you need to install and set up Jest (and React Testing Library) yourself.
You might want to look for more on: https://jestjs.io/docs/en/tutorial-react & https://testing-library.com/docs/react-testing-library/intro/. Also you can follow up for more on issues and disscusions on github channels of the libraries.
"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!"
src: jest
TLDR: Jest allows you to test any of the above without much boilerplate quickly. As a framework, the framework's code calls your test code. Jest looks for changes made to the code to run specific test cases etc. You can write test's for React just using Jest (react documentation)
"The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices". src: RTL
TLDR: It is a library (i.e., you call the code). It provides some utilities on top of just using Jest and the default react-dom/jest-utils that help us write tests quickly and with less boilerplate (using multiple act() calls etc.) and closer to real-life use (accessibility)
Use RTL with mock server workers to make your life easier for large projects.
© 2022 - 2024 — McMap. All rights reserved.