React + Jest 工作坊教程

React + Jest 工作坊教程

react-jest-workshop项目地址:https://gitcode.com/gh_mirrors/re/react-jest-workshop

项目介绍

react-jest-workshop 是一个开源项目，旨在帮助开发者学习和掌握如何使用 Jest 测试框架和 Enzyme 测试库来测试 React 应用。该项目由 Kent C. Dodds 创建，提供了丰富的示例和练习，帮助开发者从基础到高级逐步掌握 React 组件的测试技巧。

项目快速启动

环境准备

确保你已经安装了 Node.js v6 或更高版本，并推荐使用 yarn 作为包管理工具。如果你更喜欢使用 npm，也可以替换 yarn 命令。

安装依赖

1. 克隆项目仓库：

   git clone https://github.com/kentcdodds/react-jest-workshop.git
   

2. 进入项目目录：

   cd react-jest-workshop
   

3. 安装项目依赖：

   yarn install
   

运行测试

1. 启动测试：

   yarn test
   

示例代码

以下是一个简单的 React 组件示例及其测试代码：

组件代码 (src/movie-list/index.js)

import React from 'react';

const MovieList = ({ movies }) => {
  if (movies.length === 0) {
    return <div>There are no movies</div>;
  }
  return (
    <div>
      <div>There are {movies.length} movies</div>
      <ul>
        {movies.map((movie) => (
          <li key={movie.title}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default MovieList;

测试代码 (src/movie-list/__tests__/index.test.js)

import React from 'react';
import { render } from '@testing-library/react';
import MovieList from '../index';

test('renders no movies message', () => {
  const { getByText } = render(<MovieList movies={[]} />);
  expect(getByText('There are no movies')).toBeInTheDocument();
});

test('renders movie list', () => {
  const movies = [
    { title: 'Movie 1' },
    { title: 'Movie 2' },
  ];
  const { getByText } = render(<MovieList movies={movies} />);
  expect(getByText('There are 2 movies')).toBeInTheDocument();
  expect(getByText('Movie 1')).toBeInTheDocument();
  expect(getByText('Movie 2')).toBeInTheDocument();
});

应用案例和最佳实践

应用案例

• 单元测试：确保每个组件的行为符合预期。
• 集成测试：测试多个组件之间的交互。
• 快照测试：确保组件的输出在不同版本中保持一致。

最佳实践

• 使用 describe 和 it 组织测试：使测试结构清晰。
• 使用 @testing-library/react：提供简洁的 API 来测试 React 组件。
• 模拟第三方组件：在测试中模拟第三方组件的行为，确保测试的独立性。

典型生态项目

• Jest：一个强大的 JavaScript 测试框架。
• Enzyme：一个用于 React 的 JavaScript 测试工具，方便测试组件的输出。
• React Testing Library：提供简单而完整的 React DOM 测试实用工具，鼓励良好的测试实践。

通过学习和实践 react-jest-workshop，你将能够掌握 React 应用的测试技巧，提高代码质量和开发效率。

react-jest-workshop项目地址:https://gitcode.com/gh_mirrors/re/react-jest-workshop