reactjs - Redux-mock-store : Cannot get all dispatched actions into mocked store

Question

我有一个 CrudActions.js类(class):

export default class CrudActions {

  constructor(entity, api) {
    this.setEntity(entity);
    this.setApi(api);
  }

  setEntity(entity) {
    this.entity = entity.toUpperCase();
  }

  setApi(api) {
    this.api = api;
  };

  getEntity() {
    return this.entity;
  };

  getApi() {
    return this.api;
  };

  fetchItems() {
    return dispatch => {
      dispatch(
        {
          type: `TRY_FETCH_${this.getEntity()}_ITEMS`,
        }
      );
      this.getApi()
      .fetchItems()
      .then(data => {
        dispatch({
          type: `FETCH_${this.getEntity()}_ITEMS_SUCCEEDED`,
          data
        });
      })
      .catch(error => {
        dispatch({
          type: `FETCH_${this.getEntity()}_ITEMS_FAILED`,
          error,
        });
      })
    }
  };

}

我用一个新类扩展它(每条路线一个类)

import { instance as api } from "../../api/app/Ping";
import CrudActions from "../base/CrudActions";

export default class PingActions extends CrudActions {
  constructor() {
    super("ping", api);
  }
}

export const actions = new PingActions();

我要接受测试 fetchItems并测试是否发送了正确的操作。
因此，在 Ping.test.js 中:

import { actions as pingActions } from "../../../../utils/actions/app/PingActions";
import { axiosInstance } from "../../../../utils/api/base/axiosInstance";
import MockAdapter from "axios-mock-adapter";
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

const entity = 'ping';
const baseUrl = '/ping';
const dataFetchItems = [
  {
    app_version: "9.8.7"
  }
];

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

  let mock;
  let store;

  beforeEach(() => {
    store = mockStore({
      ping: {
        items: dataFetchItems
      }
    })
  })

  beforeAll(() => {
    mock = new MockAdapter(axiosInstance);
  });

  afterEach(() => {
    mock.reset();
  });


  it ('Test can dispatch success actions', () => {
    mock.onGet('http://localhost:8000/api/v1'+baseUrl).reply(200, dataFetchItems);
    store.dispatch(pingActions.fetchItems());
    console.log(store.getActions());
    expect(store.getActions()).toContainEqual({
      type: "TRY_FETCH_PING_ITEMS",
    });
  });

  it ('Test can dispatch fail actions', () => {
    mock.onGet('http://localhost:8000/api/v1'+baseUrl).reply(401);
    store.dispatch(pingActions.fetchItems());
    console.log(store.getActions());
    expect(store.getActions()).toContainEqual({
      type: "TRY_FETCH_PING_ITEMS",
    });
  });
});

通过这些测试，我可以 封面 两种情况: "TRY_FETCH_PING_ITEMS"和 "FETCH_PING_ITEMS_SUCCEEDED" (我从报道中看到)。
我无法理解如何获得 FETCH_PING_ITEMS_SUCCEEDED或 FETCH_PING_ITEMS_FAILED store.getActions() 中的操作。 store.getActions()有 只有 TRY_FETCH_PING_ITEMS里面:

 PASS  src/__tests__/utils/actions/app/PingActions.test.js
  ● Console

    console.log
      [ { type: 'TRY_FETCH_PING_ITEMS' } ]

      at Object.<anonymous> (src/__tests__/utils/actions/app/PingActions.test.js:46:13)

    console.log
      [ { type: 'TRY_FETCH_PING_ITEMS' } ]

      at Object.<anonymous> (src/__tests__/utils/actions/app/PingActions.test.js:55:13)

我做了一个新的测试，没有运气:

it ('Test can dispatch success actions', async () => {
    mock.onGet('http://localhost:8000/api/v1'+baseUrl).reply(200, dataFetchItems);
    await store.dispatch(pingActions.fetchItems());
    console.log(store.getActions());
    expect(store.getActions()).toContainEqual({
      type: "TRY_FETCH_PING_ITEMS",
    });
  });

但我得到...

 PASS  src/__tests__/utils/actions/app/PingActions.test.js
  ● Console

    console.log
      [ { type: 'TRY_FETCH_PING_ITEMS' } ]

      at Object.<anonymous> (src/__tests__/utils/actions/app/PingActions.test.js:46:13)

(我每次都想念 FETCH_PING_ITEMS_SUCCEEDED)
另一个测试:

it ('Test can dispatch success actions', () => {
    mock.onGet('http://localhost:8000/api/v1'+baseUrl).reply(200, dataFetchItems);
    return store.dispatch(pingActions.fetchItems()).then(data => console.log(data));
  });

但我得到

TypeError: Cannot read property 'then' of undefined

或者也:

it ('Test can dispatch success actions', () => {
    mock.onGet('http://localhost:8000/api/v1'+baseUrl).reply(200, dataFetchItems);
    const data = pingActions.fetchItems().then(data => console.log(data));
  });

我得到

TypeError: _PingActions.actions.fetchItems(...).then is not a function

Github 存储库: https://github.com/sineverba/body-measurement-frontend

Answer 1

一些小的改变将使它起作用。
问题
您希望 FETCH_PING_ITEMS_SUCCEEDED 或 FETCH_PING_ITEMS_FAILED 操作应该在 TRY_FETCH_PING_ITEMS 操作之后分派(dispatch)。因为成功和失败的情况都是一个 promise ，所以它们需要以正确的方式处理(在 CrudActions 中很好地实现了 then/catch 块)但是你需要在分派(dispatch) TRY_FETCH_PING_ITEMS 之后在你的测试用例中处理这些异步操作。
解决方案
来自 React 测试库 documentation :

When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass.

import {waitFor} from '@testing-library/react'

it('Test can dispatch success actions', async () => {
    mock.onGet('http://localhost:8000/api/v1' + baseUrl).reply(200);
    store.dispatch(pingActions.fetchItems());

    expect(store.getActions()).toContainEqual({
      type: "TRY_FETCH_PING_ITEMS"
    })

    await waitFor(() => {
        expect(store.getActions()).toContainEqual({
          type: "FETCH_PING_ITEMS_SUCCEEDED",
        })
    })
})

您还可以将 fetch ping 期望值放在 waitFor 回调中。

await waitFor(() => {
    expect(store.getActions()).toContainEqual({
      type: "TRY_FETCH_PING_ITEMS"
    })

    expect(store.getActions()).toContainEqual({
      type: "FETCH_PING_ITEMS_SUCCEEDED",
    })
})

注意: 不要忘记在 async 方法中的回调函数前添加 it 关键字。
注: 失败情况与成功情况相同。