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

Posted 2022-04-22 前端修罗场

在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: "[e-mail]"
;

const getUserListResponse = [
  
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[e-mail]"
  ,
  
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "[e-mail]"
  ,
];

// 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组件，你可以查看我写的这篇文章。