利用 Jest 测试 React 组件

利用 Jest 测试 React 组件

利用Jest测试React组件

Jest 是一个由 facebook 维护的测试框架，在本文中，我们将利用 Jest 来测试 React 组件。我们将首先了解如何在纯 JavaScript 函数上使用 Jest，然后再了解它提供的一些开箱即用的特性，这些特性旨在使测试 React 应用程序变得更容易。

注意，Jest 并不是专门针对 React 的测试框架，你可以使用它来测试任何 JavaScript 应用程序。然而，它提供的一些特性对于测试用户界面非常方便，这就是它非常适合 React 的原因。

示例程序

在可以进行测试前，我们需要一个应用程序，在此以一个待办事项列表为例，大家可以从 Github 中克隆该应用：testing-react-with-jest。

示例项目利用 webpack 进行构建，

应用程序的入口点是 src/index.js，它将 <App> 组件呈现到 HTML 中：

import React from 'react'
import {
    render } from 'react-dom'
import App from './App.jsx'

render(
  <App />,
  document.getElementById('root')
)

应用程序中组件树层级结构如下：

应用中使用到的初始状态数据及业务逻辑在 src/state/index.js 中：

export const initialTodos = [ ... ]

export const addTodoItem = (todos, todo) => {
    ... }

export const toggleTodoItem = (todos, id) => {
    ... }

export const removeTodoItem = (todos, id) => {
    ... }

UI 界面效果：

Jest使用

Jest 于 2014 年首次发布，虽然它最初引起了很多人的兴趣，但该项目一度处于休眠状态。然而，Facebook 投入了大量精力来改进 Jest，随后发布了一些更新的版本，与最初的开源版本相比，Jest 的唯一相似之处是名称和徽标，其他一切都已更改和重写。

安装与配置Jest

首先，我们需要安装 Jest，由于我们也在使用 Babel，所以一并安装相关的模块，使 Jest 和 Babel 开箱即用：

$ npm install jest babel-jest --save-dev
# 或
$ yarn add jest babel-jest --dev

在项目根目录下创建 __tests__ 目录，Jest 希望在一个__tests__ 目录中找到我们的测试，这已经成为 JavaScript 社区的流行约定，当然，如果你对创建 __tests__ 目录统一管理不感冒，Jest 也支持查找任意的 *.test.js 或 *.spec.js 文件。

下面我们来测试我们的状态函数。

继续创建 __tests__/state/index.test.js，在正式测试之前，我们先看是否能够正常进行测试：

describe('数字加减算术运算', () => {
   
  test('3加2减5等于0', ()