**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** Testing TypeScript Applications **Topic:** Write unit tests for a TypeScript function and a React component. (Lab topic) In this lab topic, we will focus on writing unit tests for a TypeScript function and a React component using Jest and React Testing Library. Writing unit tests is an essential part of the development process, as it allows us to verify that our code behaves as expected and catch any bugs or regressions early on. **Unit Testing a TypeScript Function** Let's consider a simple example of a TypeScript function that calculates the sum of two numbers. We will use Jest to write unit tests for this function. ```typescript // sum.ts function sum(a: number, b: number): number { return a + b; } export default sum; ``` To write unit tests for this function, we will create a new file called `sum.test.ts`. In this file, we will import the `sum` function and use Jest's `describe` and `it` functions to define our tests. ```typescript // sum.test.ts import sum from './sum'; describe('sum function', () => { it('adds two positive numbers', () => { expect(sum(2, 3)).toBe(5); }); it('adds two negative numbers', () => { expect(sum(-2, -3)).toBe(-5); }); it('adds a positive and a negative number', () => { expect(sum(2, -3)).toBe(-1); }); }); ``` In this example, we have defined three tests for the `sum` function using the `it` function. Each test uses the `expect` function to specify the expected result of calling the `sum` function with different inputs. **Unit Testing a React Component** Now, let's consider an example of a React component that renders a user's name and email. We will use React Testing Library to write unit tests for this component. ```typescript // User.tsx import React from 'react'; interface Props { name: string; email: string; } const User: React.FC<Props> = ({ name, email }) => { return ( <div> <h2>{name}</h2> <p>{email}</p> </div> ); }; export default User; ``` To write unit tests for this component, we will create a new file called `User.test.tsx`. In this file, we will import the `User` component and use React Testing Library's `render` function to render the component. ```typescript // User.test.tsx import React from 'react'; import { render, fireEvent, waitFor } from '@testing-library/react'; import User from './User'; describe('User component', () => { it('renders the user name and email', () => { const { getByText } = render(<User name="John Doe" email="john.doe@example.com" />); expect(getByText('John Doe')).toBeInTheDocument(); expect(getByText('john.doe@example.com')).toBeInTheDocument(); }); }); ``` In this example, we have defined one test for the `User` component using the `it` function. This test uses the `render` function to render the `User` component with a specific name and email. It then uses the `getByText` function to verify that the rendered component contains the expected text. **Configuring Jest and React Testing Library** To configure Jest and React Testing Library, you will need to install the following packages: * `jest`: a testing framework for JavaScript * `@testing-library/react`: a testing library for React components * `@types/jest`: type definitions for Jest * `@types/react-test-renderer`: type definitions for React Testing Library You can install these packages using npm or yarn: ```bash npm install --save-dev jest @testing-library/react @types/jest @types/react-test-renderer ``` Once you have installed these packages, you can configure Jest by creating a `jest.config.js` file in the root of your project: ```javascript module.exports = { roots: ['<rootDir>/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/src/|. spec|.test).tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], }; ``` This configuration tells Jest to look for tests in the `src` directory and to use the `ts-jest` transformer to compile TypeScript files. **Conclusion** In this lab topic, we covered writing unit tests for a TypeScript function and a React component using Jest and React Testing Library. We saw how to use Jest's `describe` and `it` functions to define tests, and how to use React Testing Library's `render` function to render a React component. We also covered configuring Jest and React Testing Library for a TypeScript project. Remember to write unit tests for your code to ensure that it is correct and stable. If you have any questions or need help with writing unit tests, please leave a comment below. **External Resources:** * Jest documentation: <https://jestjs.io/> * React Testing Library documentation: <https://testing-library.com/docs/react-testing-library/intro/> * ts-jest documentation: <https://kulshekhar.github.io/ts-jest/user/config/> **What's next?** In the next topic, we will cover **Configuring TypeScript with tsconfig.json**. Please let me know if you have any questions or need further clarification on any of the topics covered.