web-dev-qa-db-fra.com

Comment définir l'état initial pour une utilisation State Hook en plaisanterie et enzyme?

Actuellement, j'utilise un composant fonctionnel avec des crochets réactifs. Mais je ne peux pas tester complètement le crochet useState. Considérez un scénario comme, dans le crochet useEffect, je fais un appel api et définit une valeur dans useState. Pour la plaisanterie/l'enzyme, j'ai des données factices à tester, mais je ne peux pas définir la valeur de l'état initial pour useState dans la plaisanterie.

const [state, setState] = useState([]);

Je veux définir l'état initial en tant que tableau d'objets en plaisantant. Je n'ai pu trouver aucune fonction setState comme similaire comme composant de classe.

javascriptreactjsenzymereact-hooksreact-hooks-testing-library
9
Srigar

Vous pouvez vous moquer React.useState pour retourner un état initial différent dans vos tests:

// Cache original functionality
const realUseState = React.useState

// Stub the initial state
const stubInitialState = ['stub data']

// Mock useState before rendering your component
jest
  .spyOn(React, 'useState')
  .mockImplementationOnce(() => realUseState(stubInitialState))

Référence: https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

7
Jimmy

Si je me souviens bien, vous devriez essayer d'éviter de vous moquer des crochets intégrés comme useState et useEffect. S'il est difficile de déclencher le changement d'état à l'aide de la fonction invoke() de l'enzyme, cela peut être un indicateur que votre composant gagnerait à être décomposé.

5
hesto2
  • La fonction ci-dessous renverra l'état
const setHookState = (newState) => jest.fn().mockImplementation(() => [
  newState,
  () => {},
]);
  • Ajouter ci-dessous pour utiliser react

const reactMock = require('react');

Dans votre code, vous devez utiliser React.useState() pour ce travail, sinon cela ne fonctionnera pas

const [arrayValues, setArrayValues] = React.useState();

const [isFetching, setFetching] = React.useState();

  • Ensuite, dans votre test, ajoutez les valeurs d'état simulées suivantes

reactMock.useState = setHookState({ arrayValues: [], isFetching: false, });

Inspiration: Aller

0
ireshika piyumalie