web-dev-qa-db-fra.com

L'utilisation de simulacres provoque des "actions doivent être des objets simples. Utilisez un middleware personnalisé pour les actions asynchrones".

J'ai plusieurs fonctions de style Redux-Thunk qui envoient d'autres actions dans un fichier. L'une de ces actions envoie l'autre dans le cadre de sa logique. Cela ressemble à ceci:

export const functionToMock = () => async (dispatch) => {
    await dispatch({ type: 'a basic action' });
};

export const functionToTest = () => async (dispatch) => {
    dispatch(functionToMock());
};

Dans le cas où je suis réellement confronté, les fonctions sont beaucoup plus impliquées et distribuent chacune plusieurs objets d'action. Par conséquent, lorsque je teste ma functionToTest dans le monde réel, je veux me moquer de ma functionToMock du monde réel. Nous avons déjà testé functionToMock de manière approfondie, et je ne veux pas répéter la logique de ces tests dans functionToTest.

Cependant, quand j'essaye ça, comme ça:

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

jest.mock('../exampleActions');
const actions = require('../exampleActions');

const mockStore = configureMockStore([thunk]);

describe('example scenario showing my problem', () => {
    test('functionToTest dispatches fuctionToMock', () => {
        actions.functionToMock.mockReturnValue(() => Promise.resolve());

        const store = mockStore({});

        store.dispatch(actions.functionToTest());

        expect(actions.functionToMock.mock.calls.length).toBe(1);
    });
});

Je reçois cette erreur:

 FAIL  test.js
  ● example scenario showing my problem › functionToTest dispatches fuctionToMock

    Actions must be plain objects. Use custom middleware for async actions.
        at Error (native)

      at dispatch (node_modules\redux-mock-store\dist\index-cjs.js:1:3137)
      at Object.dispatch (node_modules\redux-thunk\lib\index.js:14:16)
      at Object.<anonymous> (test.js:15:23)

(L'exemple de code que j'ai posté produit effectivement cette erreur si vous les configurez dans un environnement avec Jest, Redux et Redux-Thunk. C'est mon MVCE .)

Une des idées que j'ai eu est que je peux déplacer les deux fonctions dans des fichiers différents. Malheureusement, cela irait à l'encontre de la façon dont le reste de notre projet est organisé. Je ne suis donc pas disposé à le faire à moins que ce ne soit vraiment la seule solution.

Comment puis-je simuler functionToMock dans mes tests pour functionToTest sans obtenir cette erreur?

javascriptreduxmockingjestredux-thunk
5
Kevin

Une solution consiste à simuler functionToMock. Cette question et ses réponses expliquent comment faire: Comment simuler une fonction nommée importée dans Jest lorsque le module est débloqué

Cette réponse en particulier explique que pour que cette approche fonctionne lorsque vous utilisez un transpiler tel que Babel, vous devrez peut-être faire référence à exports.functionToMock au lieu de functionToMock dans functionToTest (en dehors de vos tests), comme suit:

export const functionToTest = () => async (dispatch) => {
    dispatch(exports.functionToMock());
};
1
Kevin