使用 Jest 测试 redux store

Question

我设置了以下函数来配置 Redux 存储

const configureStore = (initialState) => {
  console.log(initialState);
  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(
      thunkMiddleware
    )
  );

  console.log(store.getState());
  return store;
};

现在，运行这是我的正常应用入口点，控制台日志显示，例如：

-> Initial state = { Test: "test" }
-> (Store gets created)
-> Store state = { Test: "test" }

很好，符合预期。然后，我尝试通过以下 Jest 测试

来确认此行为

it("should set the supplied initial state", () => {
    const initialState = {
      TestState: "Test"
    };

    const store = configureStore(initialState);
    expect(store.getState()).toEqual({
      TestState: "Test"
    });
  });

此测试失败，因为 store.getState() 返回未定义。我可以从 configureStore 函数中看到控制台日志，它显示：

-> Initial state = { Test: "test" }
-> (Store gets created)
-> Store state = undefined

为什么行为不同？ Jest 是在模拟 createStore 函数吗？我读过 Jest 不再自动模拟依赖项，那么为什么会这样呢？我是 Jest 单元测试的新手，所以任何可以解决这个问题的线索都将不胜感激。

编辑：我意识到我本质上只是在测试一个 Redux 函数，这可能是非常不必要的。无论如何，我想了解导致此问题的测试行为。

第二次编辑：如下编写我自己的 createStore 函数使测试通过：

const createStore = (reducer, initState, middleware) => {
  return {
    getState: () => (initState)
  };
};

但这仍然没有回答为什么 redux createStore 函数在测试环境中表现不同。

Answer 1

感谢 Ben Smith。

我弄明白了

当我运行自己测试时，它通过了。问题是我之前有这个测试：

it("should set the root reducer", () => {
    rootReducer.default = jest.fn();
    const store = configureStore();
    store.dispatch({
      type: "TestAction"
    });
    expect(rootReducer.default).toHaveBeenCalled();
  });

我在嘲笑 reducer，出于某种原因，我认为 reducer 不会在两个测试中一直被嘲笑，但显然它确实如此。为了解决这个问题，我只是在模拟之前存储了未模拟的 reducer，然后将这个清理添加到模拟 reducer 函数的测试的末尾：

//Cleanup - unmock reducer
rootReducer.default = actualReducer;

Answer 2

所有操作都经过您的：

rootReducer

包括 Redux 实例化时触发的操作，例如初始操作的类型为“@@redux/INIT”。

因此，如果您遇到意外状态，请务必检查您的减速器是否按预期运行。

正如您，reducer 没有按预期运行，因为模拟实例没有在测试中保留。

使用 Jest 测试 redux store

Testing the redux store using Jest

javascript

unit-testing

jestjs

redux

redux-thunk