**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** JavaScript Testing: Unit, Integration, and E2E **Topic:** Write unit and integration tests for JavaScript functions and React components.(Lab topic) In this lab topic, we'll write unit and integration tests for JavaScript functions and React components. Testing is an essential part of software development that ensures our code works as expected, catches bugs early, and prevents regressions. **Unit Testing with Jest** We'll use Jest as our testing framework for unit tests. Jest is a popular testing framework developed by Facebook that comes bundled with Create React App. **Example 1: Unit testing a simple function** Let's write a simple function `add` that adds two numbers: ```javascript // math.js function add(a, b) { return a + b; } export default add; ``` We can write a unit test for this function using Jest: ```javascript // math.test.js import add from './math'; test('adds 1 + 2 to equal 3', () => { expect(add(1, 2)).toBe(3); }); ``` In this example, we import the `add` function from `math.js` and write a test that checks if `add(1, 2)` returns `3`. **Example 2: Unit testing a React component** Let's write a simple React component `Counter` that displays a counter: ```javascript // Counter.js import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter; ``` We can write unit tests for this component using React Testing Library: ```javascript // Counter.test.js import React from 'react'; import { render, fireEvent, waitFor } from '@testing-library/react'; import Counter from './Counter'; test('renders the initial count', () => { const { getByText } = render(<Counter />); expect(getByText('Count: 0')).toBeInTheDocument(); }); test('increments the count when the button is clicked', () => { const { getByText } = render(<Counter />); const button = getByText('Increment'); fireEvent.click(button); expect(getByText('Count: 1')).toBeInTheDocument(); }); ``` In this example, we use `render` to render the `Counter` component and write two tests: one that checks if the initial count is displayed, and one that checks if the count is incremented when the button is clicked. **Integration Testing** Integration testing involves testing how different components or functions work together. **Example: Integration testing a React component with a API** Let's say we have a React component `User` that fetches user data from a API: ```javascript // User.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; function User() { const [user, setUser] = useState(null); useEffect(() => { axios.get('/api/user') .then(response => { setUser(response.data); }) .catch(error => { console.error(error); }); }, []); if (!user) { return <p>Loading...</p>; } return ( <div> <p>Name: {user.name}</p> <p>Email: {user.email}</p> </div> ); } export default User; ``` We can write an integration test for this component using Mock Service Worker: ```javascript // User.test.js import React from 'react'; import { render, waitFor } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; import User from './User'; const server = setupServer( rest.get('/api/user', (req, res, ctx) => { return res(ctx.json({ name: 'John Doe', email: 'john@example.com' })); }), ); beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); test('renders the user data', async () => { const { getByText } = render(<User />); await waitFor(() => getByText('Name: John Doe')); expect(getByText('Email: john@example.com')).toBeInTheDocument(); }); ``` In this example, we use Mock Service Worker to mock the API response and write a test that checks if the user data is rendered correctly. **Conclusion** In this lab topic, we wrote unit and integration tests for JavaScript functions and React components. We used Jest and React Testing Library for unit testing, and Mock Service Worker for integration testing. **Leave a comment below if you have any questions or need help with any of the examples.** **Recommended Resources:** * Jest Documentation: https://jestjs.io/docs/en/getting-started * React Testing Library Documentation: https://testing-library.com/docs/react-testing-library/intro * Mock Service Worker Documentation: https://mswjs.io/docs/getting-started/intro Next topic: **Optimizing JavaScript code for performance: Lazy loading, debouncing, and throttling.** (From: Deployment and Performance Optimization)