我是这样在 React 中实践 TDD 编程的

在Redux中编写测试听起来肯定有悖直觉。如果您使用了Redux，它可能看起来更加复杂。

然而，在添加功能之前编写测试有助于编写更好的代码，因为你预先考虑了将使用的设计模式、体系结构和变量的名称。

我们正在构建一个用户管理仪表板。基本上，使用Redux，我们想执行CRUD操作。

用户可以:

• 创建用户
• 更新用户
• 删除用户
• 获取用户或用户列表

这个小项目中的用户将有四个属性:

• id\name\username\email

为了简单起见，我们不编写UI代码。我们将主要关注于创建一个测试环境，编写测试，并确保我们能够处理我们想要的内容。

开始

首先，创建一个简单的React项目。

yarn create react-app react-redux-test-driven-development

一旦创建了项目，通过运行项目来确保一切正常。

cd react-redux-test-driven-development
yarn start

接下来，我们希望安装redux包和一个mock适配器。mock适配器将帮助我们模拟服务器上的请求。

yarn add @reduxjs/toolkit axios-mock-adapter axios

测试 mock 数据

在src目录中，创建一个名为utils的新目录。然后，创建一个名为tests.data.js的文件。

该文件将包含以下方法和变量:

• mockNetWorkResponse:在默认实例上创建mock适配器，并模拟到所需端点的任何GET或POST请求;

• getCreateUserResponse:返回/user/上POST请求的响应;

• getUserListResponse: 返回对/user/的GET请求的响应。

让我们来写这些方法：

import axios from "axios";
import MockAdapter from "axios-mock-adapter";

const getCreateUserResponse = {
  id: 3,
  name: "Clementine Bauch",
  username: "Samantha",
  email: "Nathan@yesenia.net"
};

const getUserListResponse = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz"
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "ervin@april.biz"
  },
];

// Adding mock network response that is used in tests

const mockNetWorkResponse = () => {
  const mock = new MockAdapter(axios);

  mock.onGet(`/users/`).reply(200, getUserListResponse);
  mock.onPost(`/users/`).reply(200, getCreateUserResponse);
};

export {
  mockNetWorkResponse,
  getCreateUserResponse,
  getUserListResponse,
};

太棒了!准备好mock适配器后，我们就可以专注于初始化存储和并编写测试了。

编写测试

这是最有趣的部分。让我们开始TDD。
首先，让我们创建并配置存储。在src目录中，创建一个名为index.js的新目录。在这个文件中，初始化存储。

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
  // Adding the reducers
});

export const store = configureStore({
  reducer: rootReducer,
});

编写 userSlice

“slice”是应用程序中单个特性的Redux reducer逻辑和动作的集合，通常定义在单个文件中。userSlice将有actions和reducer来执行CRUD操作。

slice的默认状态应该是一个空数组，毕竟，我们处理的是用户。
让我们通过编写一个测试:
在src/store中创建一个名为slices的新目录。
在这个目录中，添加一个名为user.test.js的文件。这个文件将包含我们将为userSlice编写的测试。

第一个测试是确保存储是空的或未定义的。初始状态可能是这样的:

const initialState = {
  users: [],
  loading: false,
  error: null
};

让我们尝试写一下这个测试：

• 测试初始 State。在user.test.js文件中，添加以下测试:

import reducer, {
    initialState,
  } from "./user";
  /**
   * Testing the initial state
   */

  test("Should return initial state", () => {
    expect(
      reducer(undefined, {
        type: undefined,
      })
    ).toEqual(initialState);
  });

现在运行yarn test命令。测试将失败❌
完全正常。我们还没有定义userSlice、reducer和初始状态。

在slice目录中，创建一个名为user.js的文件。

export const initialState = {
  users: [],
  loading: false,
  error: null
};

export const userSlice = createSlice({
  name: "users",
  initialState: initialState,
  extraReducers: () => {
  },
});

export default userSlice.reducer;

另外，在store/index.js中注册 slice reducer。

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import { userSlice } from "./slices/user";

const rootReducer = combineReducers({
  users: userSlice.reducer,
});

export const store = configureStore({
  reducer: rootReducer,
});

然后再次运行测试✅

• 测试用户创建:为此，我们需要编写一个thunk。thunk是一个函数，它以store的dispatch方法作为参数，然后在API或副作用完成后使用它来dispatch同步操作。

首先，让我们为这个特性编写测试。

import reducer, {
    initialState,
    addUser
  } from "./user";
  import {
    mockNetWorkResponse,
    getCreateUserResponse,
  } from "../../utils/tests.data";

 /**
   * Testing the createUser thunk
   */

  describe("Create a new user", () => {
    beforeAll(() => {
      mockNetWorkResponse();
    });

    it("Should be able to create a new user", async () => {
      // Saving previous state
      const previousState = store.getState().users;

      const previousUsers = [...previousState.users];
      previousUsers.push(getCreateUserResponse);

      // Dispatching the action

      const result = await store.dispatch(addUser(getCreateUserResponse));

      const user = result.payload;

      expect(result.type).toBe("users/addUser/fulfilled");
      expect(user).toEqual(getCreateUserResponse);

      const state = store.getState().users;

      expect(state.users).toEqual(previousUsers);
    });

在这个测试中，我们是:

• 在进行更新之前，保存以前的状态并将users属性修改为预期状态。这将有助于我们比较下一个状态。
• dispatch一个action，并确保它已完成，并比较预期状态和实际状态。
  同样，测试将失败。让我们为创建用户特性添加thunk和reducer。

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const addUser = createAsyncThunk("users/addUser", async (user) => {
  const res = await axios.post(`/users/`, user);
  return res.data;
});

export const initialState = {
  users: [],
  loading: false,
  error: null
};

export const userSlice = createSlice({
  name: "users",
  initialState: initialState,
  extraReducers: () => {
    /*
     * addUser Cases
     */

    builder.addCase(addUser.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(addUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message || "Something went wrong";
    });
    builder.addCase(addUser.fulfilled, (state, action) => {
      state.loading = true;
      state.users.push(action.payload);
    });
  },
});

export default userSlice.reducer;
export { addUser };

并再次运行测试，它应该会通过。✅

编写测试获取用户列表

首先，让我们为这个特性编写测试。

import reducer, {
    initialState,
    addUser,
    fetchUsers
  } from "./user";
  import {
    mockNetWorkResponse,
    getCreateUserResponse,
    getUserListResponse
  } from "../../utils/tests.data";

...
  /**
   * Testing the fetchUsers thunk
   */

  describe("List all users", () => {
    beforeAll(() => {
      mockNetWorkResponse();
    });

    it("Shoudl be able to fetch the user list", async () => {
      const result = await store.dispatch(fetchUsers());

      const users = result.payload;

      expect(result.type).toBe("users/fetchUsers/fulfilled");
      expect(users).toEqual(getUserListResponse);

      const state = store.getState().users;

      expect(state.users).toEqual(getUserListResponse);
    });
  });

这样测试会失败。
让我们加上reducer和thunk：

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const fetchUsers = createAsyncThunk(
  "users/fetchUsers",
  async () => {
    const response = await axios.get(`/users/`);
    return response.data;
  }
);

const addUser = createAsyncThunk("users/addUser", async (user) => {
  const res = await axios.post(`/users/`, user);
  return res.data;
});

export const initialState = {
  users: [],
  loading: false,
  error: null
};

export const userSlice = createSlice({
  name: "users",
  initialState: initialState,
  extraReducers: () => {
    /*
     * addUser Cases
     */

    builder.addCase(addUser.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(addUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message || "Something went wrong";
    });
    builder.addCase(addUser.fulfilled, (state, action) => {
      state.loading = true;
      state.users.push(action.payload);
    });

    /*
     * fetchUsers Cases
     */

    builder.addCase(fetchUsers.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchUsers.fulfilled, (state, action) => {
      state.loading = false;
      state.users = action.payload;
    });
    builder.addCase(fetchUsers.rejected, (state) => {
      state.loading = false;
    });
  },
});

export default userSlice.reducer;
export { addUser, fetchUsers };

测试通过。✅

太棒了!我们刚刚使用Redux、thunk和axios mock编写了一些测试🤩

对你来说有点挑战吗?添加诸如删除用户、修改以及检索用户等功能。

结论

在本文中，我们快速介绍了使用Redux的TDD。如果你希望使用TDD编写React组件，你可以查看我写的这篇文章。