ReactJS:如何在Jest中使用动作触发reducer

Question

我正在为减速机测试工作.但是具有动作功能的减速器的返回状态是异常的.

reducer.react-test.js

import reducer from '../../test_module/reducer';

describe('Test Reducer', () => {

  const initStatus = { id: -1, list: [] };

  it('1. has default state', () => {    
    expect(reducer(initStatus, { type: 'unexpected' })).toEqual({
      ...initStatus
    });    
  });

  it('2. has added once', () => {    
    expect(reducer(initStatus, { type: "ADD" })).toEqual({
      ...initStatus,
      id: 0,
      list: [0],
    });   
  });

  it('3. has added twice', () => {    
    const afterAddOnce = reducer(initStatus, { type: "ADD" });
    expect(reducer(afterAddOnce, { type: "ADD" })).toEqual({
      ...initStatus,
      id: 1,
      list: [0,1],
    });    
  });
})

reducer.js

export default function reducer(state={
    id: -1, list: [],
  }, action) {
  switch(action.type) {

    case "ADD": {
      state.id = state.id + 1;
      state.list.push(state.id);
      return {
        ...state,
      };
    }
  }
  return state;
}

文件夹结构

.
??? __test__
?   ??? test_module
?       ??? reducer.react-test.js
??? test_module
    ??? reducer.js

我的第一和第二个测试用例预计会有效.

但是,当我尝试触发两次动作时,我会从第一个动作存储返回状态.但是返回状态是意外的,它执行了ADD两次动作.(我只期待过一次)

因此,当我跑步时,我得到了这个结果jest:

FAIL  __test__/test_module/reducer.react-test.js
  ? Test Reducer › has added twice

    expect(received).toEqual(expected)

    Expected value to equal:
      {"id": 1, "list": [0, 1]}
    Received:
      {"id": 2, "list": [0, 1, 2]}

    Difference:

    - Expected
    + Received

     Object {
    -  "id": 1,
    +  "id": 2,
       "list": Array [
         0,
         1,
    +    2,
       ],
     }

我必须误解触发减速器功能的用法.我希望得到一些正确的方法来触发减速器的动作并获得预期的结果.

Answer 1

罪魁祸首可以在您的减速器中找到，特别是这些行：

state.id = state.id + 1;
state.list.push(state.id);

这里的减速器既改变状态又返回一个新状态。改变状态是一种不好的做法，并且可能会导致奇怪的效果（就像您正在经历的那样）

所以'2。已添加一次'测试会将id增加到0。这将在下一次测试期间保留在内存中，其中initialStatus的id将为0，而不是-1。在我们的reducer中，state指向initialStatus。因此调用state.id = status.id + 1;会增加initialStatus的id 字段，对于列表也是如此。这就是为什么 ADD 操作被调用了 3 次的原因。

远离减速器中的突变可以帮助解决这个问题。

case "ADD": {
    const newId = state.id + 1;

    return {
      id: newId,
      list: state.list.concat([newId])
    };
}

请记住，永远不要改变减速器中的状态，而是始终返回新状态！（http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments）