Skip to content

Latest commit

 

History

History
114 lines (87 loc) · 3.42 KB

jest-in-action-redux-reducer.md

File metadata and controls

114 lines (87 loc) · 3.42 KB
Raw

Jest 测试之 Redux Reducer

欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：413381701

如何配置 Jest

  • 【必选】安装依赖，yarn add --dev jest，是不是非常简单，就一句话。
  • 【可选】如果你习惯了写 ES6 的代码，需要安装 yarn add --dev babel-preset-env
  • 【可选】如果安装了上一步，这一步就变成必选操作了，那就是在项目根目录创建 .babelrc 文件，并在里面配置"presets": ["env"]
  • Jest 约定把所有的单元测试文件放在一个叫__tests__的目录里，所以在项目根目录创建一个。当然你可以放在别的目录里，只需要在 package.json 另写配置代码即可。

关于 Redux

如果你想复习一下整个 Redux 知识或 Redux Actions 知识，请查看:

Redux Reducer 怎么写？

  • news.js
export function newsDetail(state = {}, { type, data }) {
  switch (type) {
    case "NEWS_DETAIL":
      return { ...state, ...data };
    default:
      return state;
  }
}

Redux Reducer 单元测试怎么写

  • __tests__/news.test.js
import { newsDetail } from "../news";

describe("News reducer", () => {
  it("newsDetail has a default store", () => {
    const received = newsDetail(undefined, { type: "unexpected" });
    const expected = {};
    expect(received).toEqual(expected);
  });

  it("newsDetail can handle 'NEWS_DETAIL'", () => {
    const received = newsDetail(
      {},
      {
        type: "NEWS_DETAIL",
        data: {
          title: "Redux Reducer 单元测试",
          viewCounts: 40
        }
      }
    );
    const expected = {
      title: "Redux Reducer 单元测试",
      viewCounts: 40
    };
    expect(received).toHaveProperty("title");
    expect(received).toEqual(expected);
  });
});

怎么运行单元测试

  • 先在 package.json 的 script 里配置如下代码：
"scripts": {
    "test": "./node_modules/.bin/jest"
}

  • 在项目根目录命令行执行：yarn test

  • 命令行里就会出现：

PASS  __tests__/news.test.js
  News reducer
    ✓ newsDetail has a default store (4ms)
    ✓ newsDetail can handle 'NEWS_DETAIL' (2ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.149s

Q & A

  • 为什么是安装 babel-preset-env

  • 答：现如今不同的浏览器和平台 Chrome, Opera, Edge, Firefox, Safari, IE, iOS, Android, Node, Electron。不同的模块 "amd" ， "umd" ， "systemjs", "commonjs" 这些 ES 运行环境对 ES6, ES7, ES8 支持不一，有的支持好，有的支持差。为了充分发挥新版 ES 的特性，我们需要在特定的平台上执行特定的转码规则，说白了就像是按需转码的意思。 摘自babel-preset-env 使用介绍

  • 如何放把单元测试文件放在 __tests__ 外的其它路径？

  • 答：如果你取名叫 otherFolder, 那就在 package.json 根节点里添加如下代码：

"jest": {
    "testMatch": [
      "**/otherFolder/**/?(*.)(spec|test).js?(x)"
    ],
}

更多配置，请参考: