web-dev-qa-db-fra.com

Comment se gâter des intercepteurs lors de l'utilisation de Jest.Mock ('Axios')?

Lors de l'exécution d'un test en utilisant Jest, j'ai la syntaxe de costume de base:

jest.mock('axios');

describe('app', () => {
    let render

    beforeEach(() => {
        axiosMock.get.mockResolvedValueOnce({
            data: {greeting: 'hello there'},
        }),
        render= renderApp()
    });

    test('should render something', () => {
        expect(something).toBeInTheDocument();
    });


});

Le problème est que j'ai des intercepteurs dans mon code qui, lors de l'exécution du test avec les sorties de la commande de Jest:

TypeError: impossible de lire les "intercepteurs" de la propriété de non défini

et pointe vers l'objet Intercepteurs

axiosInstance.interceptors.request.use(...

axiosInstance est la variable stockant le retour de axios.create

export const axiosInstance = axios.create({...

Référu à ce fil axios sur SO Comment testez-moi Axios dans Jest mais cela n'implique aucun intercepteur, alors n'a pas vraiment aidé.

reactjsjestjsaxiosreact-testing-library
4
Eugen Sunic

C'était suffisant à la fin, simple et simple jest.fn()

jest.mock('axios', () => {
    return {
        interceptors: {
            request: { use: jest.fn(), eject: jest.fn() },
            response: { use: jest.fn(), eject: jest.fn() },
        },
    };
});
8
Eugen Sunic

Assurez-vous de vous moquer des intercepteurs et axios.create Si utilisé:

// Replace any instances with the mocked instance (a new mock could be used here instead):
axios.create.mockImplementation((config) => axios);

// Mock out the interceptor (assuming there is only one):
let requestCallback = () => {
  console.log("There were no interceptors");
};
axios.interceptors.request.use.mockImplementation((callback) => {
  requestCallback = callback;
});

// Mock out the get request so that it returns the mocked data but also calls the 
// interceptor code:
axios.get.mockImplementation(() => {
  requestCallback();
  return {
    data: "this is some data"
  };
});

NOTE Si cela ne fonctionne pas:

Cet exemple suppose que les appels de création et d'interceptage sont dans un endroit où la Jest peut se moquer de la tâche. Placer le axios.create ou alors axiosInstance.interceptors.request.use lignes en dehors de la portée de la fonction peut entraîner l'échec de la moqueur ci-dessus. Ceci est un exemple de fichier où la Jest peut se moquer de la marque:

const axios = require('axios');

const DEBUG = true;

const customRequest = (url) => {
  // Example of axios.create from https://www.npmjs.com/package/axios#axioscreateconfig
  const axiosInstance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
  });

  // Example of interceptor taken from https://stackoverflow.com/a/52737325/7470360:
  axiosInstance.interceptors.request.use((config) => {
    if (DEBUG) { console.info("Request called", config); }
    return config;
  }, (error) => {
    if (DEBUG) { console.error("Request error ", error); }
    return Promise.reject(error);
  });

  return axiosInstance.get(url);
}

module.exports = customRequest;

Le code moqueur se moquera de l'axios.create Appel et le axiosInstance appelle à customRequest. Déplacer la création ou l'interception en dehors de la fonction entraînera l'échec des moqueurs.

4
A Jar of Clay