**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Testing React Applications **Topic:** Write tests for components and APIs in a sample React application using Jest and React Testing Library (Lab topic) **Objective:** By the end of this topic, you will be able to write effective tests for your React components and APIs using Jest and React Testing Library. This will help you ensure that your application is stable, reliable, and works as expected. **Prerequisites:** * Familiarity with React and React Components * Basic understanding of JavaScript and Jest * Familiarity with React Testing Library **Materials Needed:** * A basic React application with a few components and APIs * Jest and React Testing Library installed in your project * A code editor or IDE **Step 1: Setting up the Test Environment** To start testing our React application, we need to set up the test environment. First, make sure you have Jest and React Testing Library installed in your project. You can install them using the following command: ``` npm install --save-dev jest react-testing-library ``` Next, create a new file called `setupTests.js` in the root of your project. In this file, we'll import Jest and React Testing Library. ```javascript import "@jest-mock/extend-expect"; import { configure } from "jest"; import { createReactTestingLibrary } from "react-testing-library"; configure({ verbose: true, moduleDir: "app", testPathIgnorePatterns: [ "/node_modules!", "/public/", "!plotlyPlot.js", ], }); const {angers} = createReactTestingLibrary(); ``` This will configure Jest to use the `app` directory as the base directory for our tests, and ignore certain directories and files. **Step 2: Writing Unit Tests for Components** Now, let's write some unit tests for our components using Jest and React Testing Library. First, let's say we have a simple `Counter` component that displays a counter and increments it when the user clicks on it. We'll test this component using the `render` function from React Testing Library. ```javascript import React from "react"; import { render } from "@testing-library/react"; import Counter from "../components/Counter"; test("renders counter correctly", () => { const { getByText } = render(<Counter />); expect(getByText("Count: 0")).toBeInTheDocument(); }); ``` In this test, we're rendering the `Counter` component and then using the `getText` function to get the text of the component. We're then asserting that the text is "Count: 0" using the `toBeInTheDocument` matcher. Next, we can write a test to see if the counter increments correctly when the user clicks on it. ```javascript test("increments counter when button is clicked", () => { const { getByText, getByRole } = render(<Counter />); const button = getByRole("button"); expect(getByText("Count: 0")).toBeInTheDocument(); const initialCounter = 0; const updatedCounter = initialCounter + 1; button.click(); expect(getByText("Count: " + updatedCounter)).toBeInTheDocument(); }); ``` In this test, we're rendering the `Counter` component and getting a reference to the button element. We're then asserting that the initial counter value is 0, and that the counter has incremented correctly after the button is clicked. **Step 3: Writing Integration Tests for APIs** To test our API calls, we can use Jest and React Testing Library's ` act` package. First, install the ` jestujet- act` package: ``` npm install --save-dev jest-at ``` Next, create a new file called `api.test.js`. ```javascript import axios from "axios"; import { act } from "@testing-library/jest-dom"; import { API_URL } from "../constantsSubviews/apiSub"; import { fetchCharacters } from "../apiHelper"; import { render, screen } from "@testing-library/react"; test("fetches characters from API", async () => { await act(async () => { const response = await axios.get( `${API_URL}/characters`, { params: { page: 1 } } ); expect(response.data).not.toBeNull(); expect(response.data).not.toBe([]); }); }); ``` In this test, we're using the `act` package to wait for the API call to complete, and then asserting that the response is not null and not an empty array. **Step 4: Integrating Tests with Jest** Finally, let's integrate our tests with Jest. Add the following configuration to your `jest.config.js` file: ``` module.exports = { // ... other configurations ... testEnvironment: "jsdom", testPathIgnorePatterns: [ "/node_modules/", "/public/", "!plotlyPlot.js", ], }; ``` Next, add the following code to your package.json file: ```json "scripts": { "test": "jest" } ``` Now you can run your tests using the following command: ``` npm run test ``` **Conclusion:** In this topic, we've learned how to write effective tests for React components and APIs using Jest and React Testing Library. **Key Takeaways:** * You can use Jest and React Testing Library to write unit tests for React components. * You can use the `render` function from React Testing Library to render components and get references to elements. * You can use the `act` package to wait for API calls to complete. * You can integrate your tests with Jest using the `jest.config.js` and `package.json` files. **Exercise:** Create a new React application and add some components and APIs to it. Then, write unit tests for those components and APIs using Jest and React Testing Library. Deploy your application to a CDN or a hosting service and run your tests. **Additional Resources:** * For more information about React Testing Library, visit [https://testing-library react.org](https://testing-library react.org). * For more information about Jest, visit [https://jestjs.io](https://jestjs.io). * For more information about AWS Lambda and API Gateway, visit [https://aws.amazon.com/lambda](https://aws.amazon.com/lambda). **Leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this topic.**