web-dev-qa-db-fra.com

Jest - Simulez une fonction appelée à l'intérieur d'un composant React

Jest fournit un moyen de se moquer des fonctions comme décrit dans leur documentation

apiGetMethod = jest.fn().mockImplementation(
    new Promise((resolve, reject) => {
        const userID = parseInt(url.substr('/users/'.length), 10);
        process.nextTick(
            () => users[userID] ? resolve(users[userID]) : reject({
                error: 'User with ' + userID + ' not found.',
            });
        );
    });
);

Cependant, ces simulacres ne semblent fonctionner que lorsque la fonction est appelée directement dans un test.

describe('example test', () => {
    it('uses the mocked function', () => {
        apiGetMethod().then(...);
    });
});

Si j'ai un composant de réaction défini en tant que tel, comment puis-je m'en moquer?

import { apiGetMethod } from './api';

class Foo extends React.Component {
    state = {
        data: []
    }

    makeRequest = () => {
       apiGetMethod().then(result => {
           this.setState({data: result});
       });
    };

    componentDidMount() {
        this.makeRequest();
    }

    render() {
        return (
           <ul>
             { this.state.data.map((data) => <li>{data}</li>) }
           </ul>
        )   
    }
}

Je ne sais pas comment faire en sorte que le composant Foo appelle mon implémentation moquée apiGetMethod() afin que je puisse tester le rendu correct avec les données.

(Ceci est un exemple simplifié et artificiel pour comprendre comment simuler des fonctions appelées composants internes de reag)

edit: fichier api.js pour plus de clarté

// api.js
import 'whatwg-fetch';

export function apiGetMethod() {
   return fetch(url, {...});
}
unit-testingreactjsmockingjestjs
7
Ryan Castner

Vous devez vous moquer du module ./api de cette façon et l'importer afin de pouvoir définir l'implémentation du faux.

import { apiGetMethod } from './api'

jest.mock('./api', () => ({ apiGetMethod: jest.fn() }))

dans votre test peut définir le fonctionnement de la maquette à l’aide de mockImplementation :

apiGetMethod.mockImplementation(() => Promise.resolve('test1234'))
8
Andreas Köberle

Au cas où la méthode jest.mock de la réponse de @ Andreas ne fonctionnerait pas pour vous. vous pouvez essayer ce qui suit dans votre fichier de test .

const api = require('./api');
api.apiGetMethod = jest.fn(/* Add custom implementation here.*/);

Ceci devrait exécuter votre version simulée du apiGetMethod à l'intérieur de votre composant Foo.

4
Nahush Farkande

Une autre solution pour se moquer de cela serait: 

window['getData'] = jest.fn();
0
Dan