React 是一个流行的前端框架，但是对于大型应用程序，手动测试变得不可行。单元测试是 React 应用程序中必不可少的一部分，因为它可以帮助我们确保代码的正确性和可维护性。在本文中，我们将介绍如何使用 Chai 和 Jest 进行 React 单元测试。
Chai 和 Jest 简介
Chai 是一个 JavaScript 的断言库，它提供了许多有用的断言函数，可以帮助我们编写易于阅读和维护的测试。它可以与 Mocha、Jasmine 和 Jest 等测试框架一起使用。
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它专门用于测试 React 应用程序。它提供了许多功能，例如自动化测试、快照测试和模拟测试。
准备工作
在开始编写测试之前，我们需要确保已经安装了必需的软件包。我们需要安装 Jest 和 Chai。
npm install --save-dev jest chai
编写测试
1. 测试 React 组件
让我们从测试 React 组件开始。我们将编写一个简单的组件，然后编写测试来确保它按预期工作。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
------- ------------------------
-------------
---------
--
-
------ ------- -------现在，我们将编写一个测试来确保当我们单击按钮时，单击处理程序被调用。我们将使用 Jest 来编写这个测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
--------- ------- ------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - ------------- ----------------- ------------ --- ----
-----------------------------------------
-----------------------------------
---
---在测试中，我们首先创建一个模拟的 onClick 处理程序，然后将其传递给 Button 组件。然后，我们模拟单击事件，并使用 expect 断言来确保 onClick 处理程序被调用。
2. 测试 Redux 动作
Redux 是一个流行的状态管理库，它可以帮助我们管理 React 应用程序的状态。我们将编写一个测试来确保 Redux 动作按预期工作。
import { incrementCounter } from './actions';
describe('incrementCounter action', () => {
it('returns an action with type "INCREMENT_COUNTER"', () => {
const action = incrementCounter();
expect(action.type).toEqual('INCREMENT_COUNTER');
});
});在测试中，我们调用 incrementCounter 动作并使用 expect 断言来确保它返回一个具有正确类型的动作。
3. 测试 Redux reducer
接下来，我们将编写一个测试来确保 Redux reducer 按预期工作。
-- -------------------- ---- -------
------ ------- ---- ------------
------ - ---------------- - ---- ------------
------------------- -- -- -
-------------- --- --------- -- -- -
----- ------------ - - -------- - --
----- ------ - -------------------
----- -------- - --------------------- --------
------------------------------------
---
---在测试中，我们首先定义初始状态，然后调用 incrementCounter 动作并将其传递给 reducer。最后，我们使用 expect 断言来确保 reducer 返回具有正确状态的新状态。
结论
在本文中，我们介绍了如何使用 Chai 和 Jest 进行 React 单元测试。我们编写了测试来测试 React 组件、Redux 动作和 Redux reducer。通过编写这些测试，我们可以确保我们的代码按预期工作，并且易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675f3c8fe49b4d071621f72d