深度剖析：React-Typescript 结合 Jest 和 React Testing Library 开展单元测试的完整指南

2023-12-28 14:34:05

React-Typescript 结合 Jest 和 React Testing Library，可以在 React 应用中进行单元测试。这种测试方法可以帮助开发人员确保他们的代码是正确的，并且可以正常工作。

要进行单元测试，需要先安装 Jest 和 React Testing Library。可以使用以下命令进行安装：

npm install --save-dev jest react-testing-library

安装完成后，可以在项目中创建一个名为 test 的目录，并在其中创建一个名为 App.test.js 的文件。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { render, fireEvent } from '@testing-library/react';

describe('App', () => {
  it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
    ReactDOM.unmountComponentAtNode(div);
  });

  it('renders the title', () => {
    const { getByText } = render(<App />);
    expect(getByText('Hello, world!')).toBeInTheDocument();
  });

  it('changes the title when the button is clicked', () => {
    const { getByText, getByTestId } = render(<App />);
    fireEvent.click(getByTestId('button'));
    expect(getByText('Hello, React!')).toBeInTheDocument();
  });
});