javascript - 如何使用 reduxsauce 获得 100% 测试覆盖率

标签 javascript reactjs redux react-redux jestjs

我正在尝试使用 Jest 测试带有 Redux (react-redux + reduxsauce) 的 React 应用程序。 我实现了以下方法:

import { createActions, createReducer } from "reduxsauce";

/**
* Action types & creators
*/
export const { Types, Creators } = createActions({
    addSample: ["text"],
    removeSample: ["id"]
});

/**
* Handlers
*/
export const INITIAL_STATE = [];
export function add(state = INITIAL_STATE, action) {
    return [...state, { id: Math.random(), text: action.text }];
}
export function remove(state = INITIAL_STATE, action) {
    return state.filter(sample => sample.id !== action.id);
}

/**
* Reducer
*/
export default createReducer(INITIAL_STATE, {
    [Types.ADD_SAMPLE]: add,
    [Types.REMOVE_SAMPLE]: remove
});

此实现允许我在组件之间使用 Redux 存储。 但是,在测试中我无法达到 100% 的覆盖率,因为仅在分支标准中我的覆盖率为 0%(在其他标准中我达到 100% - 语句、函数、行); 根据 Coverage 的反馈,第 16 行和第 20 行我没有对处理程序 add()remove() 的声明执行测试。

我猜想在内部reduxsauce用一些switch case实现了Reducer,但我不知道如何测试这一部分的方式允许测试覆盖率标准

最佳答案

只要看看这一部分,就会清楚为什么会出现问题(在本例中,分支标准没有达到 100% 覆盖率)。

/* ... */ add(state = INITIAL_STATE, action) { /* ... */
/* ... */ remove(state = INITIAL_STATE, action) { /* ... */

我们可以按如下方式阅读此语法:

函数add()的声明,有以下条件

  • 如果在第一个参数中传递一个值,则假定 state 在函数作用域中具有该值;
  • 如果未传递值(或者传递的值未定义),则假设state 的值将设置为 INITIAL_STATE函数范围;

[了解有关此语法的更多信息 here ]

由于声明了此条件,因此有必要测试这两种可能性,因为测试在分支标准中具有 100% 的覆盖率。

例如:

it("should return INITIAL_STATE when passed undefined on parameter and sometingh on action",
 () => {
    expect(setCurrent(undefined, action)).toBe(INITIAL_STATE);
 }
);

it("should return 'test' when passed 'test' on parameter and sometingh on action", 
  () => {
    expect(setCurrent("test", action)).toBe('test');
  }
);

关于javascript - 如何使用 reduxsauce 获得 100% 测试覆盖率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56744964/

相关文章:

javascript - React JS onClick 改变正在渲染的内容

javascript - jQuery 数据表排序不正确

javascript - onclick 内部函数失败

javascript - window.open 不工作/不被调用

javascript - 单击 "Buy Now"按钮时,ajax post 应将数据发送到路由 "/buy"

reactjs - handleSubmit 上出现 REDUX-FORM 错误

javascript - d3.nest 具有可变子深度

html - 在 JSX 中使用 css 变亮和变暗功能

javascript - 如何使用基于函数的 React 将状态传递给子组件?

javascript - redux 存储的最大内存大小是多少?