javascript - 单元测试 Redux 操作 - Thunk Undefined

Question

想知道是否有人可以指出我所期望的是一个愚蠢的错误。

我有一个用户登录操作。

我正在尝试测试此操作，我已经遵循了 redux 文档以及 redux-mock-store 文档，但是我不断收到如下错误:

TypeError: Cannot read property 'default' of undefined

      4 | import thunkMiddleware from 'redux-thunk'
      5 | 
    > 6 | const middlewares = [thunkMiddleware] // add your middlewares like `redux-thunk`
        |                      ^
      7 | const mockStore = configureStore(middlewares)
      8 | 
      9 | describe("userActions", () => {

      at Object.thunkMiddleware (actions/user.actions.spec.js:6:22)

我的测试代码如下:

import {userActions} from "./user.actions";
import {userConstants} from "../constants/user.constants";
import configureStore from 'redux-mock-store'
import thunkMiddleware from 'redux-thunk'

const middlewares = [thunkMiddleware] // add your middlewares like `redux-thunk`
const mockStore = configureStore(middlewares)

describe("userActions", () => {
    describe("login", () => {
        it(`should dispatch a ${userConstants.LOGIN_REQUEST}`, () =>{
            const store = mockStore({});
            return store.dispatch(userActions.login("someuser", "somepassword")).then(() => {
                expect(store.getState().loggingIn).toBeTruthy();
            });
        })
    })
});

我仔细检查了 redux-thunk 和 redux-mock-store 是否包含在我的 npm 开发依赖项中，并删除了 node_modules 目录并使用 npm install 重新安装它们。

谁能看出哪里出了问题？

谢谢

编辑:

看来我在做一些根本性的错误，我试图将它简化为几乎回到干净的状态，以找到引入问题的位置。

即使有这个测试:

import authentication from "./authentication.reducer";
import { userConstants } from "../constants/user.constants";

describe("authentication reducer", () => {

    it("is a passing test", () => {
        authentication();
        expect("").toEqual("");
    });
});

反对:

function authentication(){
    return "test";
}
export default authentication

我收到一个未定义的错误:

  ● authentication reducer › is a passing test

    TypeError: Cannot read property 'default' of undefined

       6 | 
       7 |     it("is a passing test", () => {
    >  8 |         authentication();
         |         ^
       9 |         expect("").toEqual("");
      10 |     });

      at Object.<anonymous> (reducers/authentication.reducer.spec.js:8:9)

Answer 1

是的，根据该错误，您似乎遇到了模块依赖性问题。查看您的 webpack 配置。

关于redux-mock-store，我建议您创建一个帮助程序以备将来测试需要:

import configureStore from 'redux-mock-store'
import thunk from 'redux-thunk'

export default function(middlewares = [thunk], data = {}) {
  const mockedStore = configureStore(middlewares)

  return mockedStore(data)
}

然后您将把它包含在您的测试用例中并像这样使用:

beforeEach(() => {
  store = getMockStore()
})

afterEach(() => {
  store.clearActions()
})