Test de la valeur de retour d'un crochet personnalisé

Question

J'essaie d'écrire une combinaison de test pour ce crochet personnalisé.

export const useInitialMount = () => {
  const isFirstRender = useRef(true);

  // in the very first render the ref is true, but we immediately change it to false.
  // so the every renders after will be false.
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return true;
  }
  return false;
};

Très simple, il renvoie vrai ou faux.
Comme je l'ai vu, je dois utiliser "@testing-library/react-hooks". et voici mon essai :

test("should return true in the very first render and false in the next renders", () => {
    const {result} = renderHook(() => {
      useInitialMount();
    });
    expect(result.current).toBe(true);
  });

mais j'ai obtenu undefined ce qui n'a pas de sens il devrait être soit vrai soit faux.

PS : le code fonctionne comme prévu sur le projet.

Answer 1

La syntaxe de l'option renderHook L'appel n'est pas tout à fait correct dans votre test. Vous devriez retourner useInitialMount() de renderHook et non pas simplement l'appeler à l'intérieur de celui-ci (d'où le fait que vous obteniez undefined ).

test('should return true in the very first render and false in the next renders', () => {
    const { result } = renderHook(() => useInitialMount());
    expect(result.current).toBe(true);
});

Edit : Pour clarifier, la différence ici est que l'appel () => { useInitialMount(); }); renvoie à undefined il n'y a pas de déclaration de retour, donc la fonction retournera undefined par défaut. Mais appeler () => useInitialMount() (qui est la syntaxe courte pour () => { return useInitialMount(); } ) retournera la valeur de l'appel du hook.