J'essaie de tester les cas lorsque mon appel AxIOS n'obtient pas une réponse HTTP de 200. Lorsque Axios n'a pas de réponse réussie, elle jette une erreur. Je veux vérifier que la console.log est appelée deux fois dans ce cas.
Voici un extrait de la classe que je teste: et voici un extrait de mon Test de plaisance Je connais la J'ai essayé de déplacer la console update Je suis jolie Bien sûr, c'est quelque chose à faire avec tout l'async qui se passe.
Si je le fais: puis le test échoue toujours mais ma raison change: Mise à jour 2 J'ai compris pourquoi console.log était appelé 4 fois! Maintenant, j'ai juste besoin de comprendre comment je devrais refacturer mes tests.
Si je commente ma jumel mock, et même l'ensemble test de l'unité alors je peux compter dans ma console qu'il existe déjà deux appels de console.log. console.log = jest.fn () bit fait quelque chose parce que la console ne connecte plus la fausse erreur d'erreur quand je l'ai mis. Cependant, le test échoue car la fonction maquette attendue attendue deux fois, mais elle a été appelée zéro fois. . jest.fn () dans "avant", "avant", "avant une variable globale. la fonction maquette attendue pour avoir été appelée deux fois, mais cela s'appelait quatre fois. Maintenant, je dois juste comprendre pourquoi il s'appelait quatre fois pas deux fois. peu profond ( composantDidMount () ou quelque chose. Lorsque j'ajoute app.Instance (). ComposantDidMount () , je peux voir visuellement qu'il enregistre 4 fois.
3 Réponses :
Comme on dirait que vous savez déjà ce que vous faites avec des moqueurs, peut-être que le problème a à voir avec Je crois que votre appel à Ensuite, vous appelez par la suite SO, TOTAL ... 4 des appels vers espère que vous pointe dans la bonne direction ... En fait, votre question semble assez similaire à [cette question de Stackoverflow sur la façon de Vous pouvez utiliser Jest Mock Fonctions à Par exemple, votre test peut ressembler à ceci: composantdidmount () . peu profonde ( composentDidMount () une fois (ce qui signifie votre console . journal sera appelé deux fois là-bas). app.Instance (). ComposantDidMount () - Vous appelez ComposantDIdMount () à nouveau (ce qui signifie que votre console.log sera appelé deux fois là-bas). console.log . Réponse originale
Spyon L'objet GLOBAL.CONSOLE objet.
Malheureusement, ce n'est pas ça. J'ai fait une mise à jour cependant! C'est quelque chose à faire avec toutes les choses asynchrones qui continuent.
@Pickle_jr Assurez-vous que vous réinitialisez toutes vos simulacres avec chaque course? Si vous obtenez la fonction de simulation attendue attendue deux fois, mais cela s'appelait quatre fois. est-il possible que d'autres tests fonctionnent également sur console.log Se faire appeler? Désolé ... juste un coup dans le noir ...
Pas de soucis, je l'apprécie! Je pense que c'est quelque chose peu profond (
Je l'ai compris! Quel genre de ... Je ne suis pas certain pourquoi cela fonctionne comme ça, mais en définissant la moqueur dans le "IT" réel n'a pas fonctionné.
La solution consistait à faire un à l'empreinte et non
Idéalement, vous déplaceriez votre appel d'API en dehors de L'exemple suivant peut être effectué avec Remarque STRUT>: La ci-dessous suppose Exemple de travail fort>: https://codesandbox.io/s/939W229L9R (inclut les deux app.js fort> (ce sera un conteneur qui contient tout pertinent Etat CODE> et la disperse à son composantDidMount Code> et dans sa propre classe méthode code>. La façon dont il peut être invoqué manuellement à partir d'une méthode de cycle de vie ou d'un rappel d'événement. En outre, vous devriez anticiper la réponse à affecter votre UI Etat CODE> de certaines modifications (exemple: Affichage d'un message à l'utilisateur que la demande a échoué et à essayer à nouveau). .Chen / .catch code> au lieu de async / attendre code>. De toute façon, vous travaillez avec promesses code> qui sont asynchrones code> et ils ont donc besoin asynchrone code> tests p> DisablelifecyCleTethods code> est true dans l'adaptateur Enzyme code>. En outre, il suffit de tester état code> modifications (ou a console.log code>) est un peu superflu; Au lieu de cela, vous testez si un composant est rendu en fonction de l'état actuel code> code>. p> extrémité finale code> et intégration code > TESTS --- Vous pouvez exécuter les tests en cliquant sur l'onglet TESTS CODE> situé près du bas à gauche du bac à sable) P>
Enfants CODE> au besoin) P> import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import React from "react";
import { shallow } from "enzyme";
import App from "../App";
const solutions = [{ ... }, { ... }];
const username = "Some User"
const mockAxios = new MockAdapter(axios);
const initialState = {
error: "",
isLoading: true,
solutions: {},
username: ""
};
describe("App", () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<App />);
wrapper.setState({ ...initialState });
});
afterEach(() => {
mock.reset();
});
afterAll(() => {
mock.restore();
wrapper.unmount();
});
it("displays an error upon unsuccessful API call", async () => {
try {
mockAxios.onGet("/users").networkErrorOnce();
await axios.get("users");
} catch (err) {
const error = err.toString();
wrapper.setState({
error,
isLoading: false,
solutions: {},
username: ""
});
wrapper.update();
expect(wrapper.state('isLoading')).toBeEqual(error);
expect(wrapper.state('isLoading')).toBeFalsy();
expect(wrapper.state('solutions')).toEqual({});
expect(wrapper.state('username')).toEqual("");
}
});
it("sets data to state based upon successful API call", async () => {
try {
mockAxios.onGet("/users").reply(200, { solutions, username });
const res = await axios.get("users");
wrapper.setState({
error: "",
isLoading: true,
solutions: res.data.solutions,
username: res.data.username
});
wrapper.update();
expect(wrapper.state('isLoading')).toBeFalsy();
expect(wrapper.state('solutions')).toEqual(solutions);
expect(wrapper.state('username')).toEqual(username);
} catch (e) {
console.log(e);
}
});
});