web-dev-qa-db-fra.com

Test de réact-redux usingelector

J'ai une application réagissante qui utilise React-Redux, utilise-usage pour obtenir des données du magasin. Le composant réactif a

function PersonDataView() {
  const name= useSelector(state => state.data.name)
  const dob= useSelector(state => state.data.dob)
  const dispatch = useDispatch()
  const show= () => dispatch({type: 'SHOW'})
  const remove= () => dispatch({type: 'REMOVE'})
  return (
    <div>
      <h2>Person Details</h2>
     <div>
      <button onClick={show}>Show</button>
      <span aria-label="name">{name}</span>
      <span aria-label="dob">{dob}</span>
      <button onClick={remove}>Remove</button>
     </div>
   </div>
  )
}

J'utilise une bibliothèque de test de réact pour tester ce composant. Y a-t-il une API qui facilite les tests de ces composants. Je connais deux façons de tester ces: 1) Je peux vous moquer du magasin à l'aide de Redux-Mock-Store puis enveloppez ce composant sous le composant fournisseur. 2) se moquer de la méthode utiliseallector en plaisantant

jest.mock('react-redux', () => ({
  useSelector: () => ({
  })
});

Mais le problème à l'aide de Jest Mock est en cas de sélecteur multiple, tous les utilisateurs permettent de renvoyer la même valeur moquée. Utilisation de la façade de Jest de moqueur, jest.fn (). MockreturnValueueOnce () n'a pas l'air de me corriger.

6
Krishna

Je suggérerais une approche différente - extraire vos sélecteurs dans un fichier distinct, comme par exemple. fichier selectors.js:

const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;

Ensuite, en test, vous pourriez mockner UTILOPTORY comme ci-dessous:

jest.mock('react-redux', () => ({
  useSelector: jest.fn().mockImplementation(selector => selector()),
});

Et simulacre des sélecteurs séparément, comme:

jest.mock('./selectors.js', () => ({
  nameSelector: jest.fn().mockReturnValue("myTestName"),
  dobSelector: jest.fn().mockReturnValue("myTestDob"),
});
1
Emzaw