web-dev-qa-db-fra.com

Comment déclencher l'événement de modification sur un composant React-Select avec React-Testing-Library?

Étant donné que je ne peux pas tester les composants internes directement avec react-testing-library, Comment procéder pour tester un composant qui utilise react-select? Par exemple, si j'ai un rendu conditionnel basé sur la valeur de react-select, Qui ne rend pas un <select/> Traditionnel, puis-je quand même déclencher le changement?

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "First", label: "First" },
  { value: "Second", label: "Second" },
  { value: "Third", label: "Third" },
];

function TestApp() {
  const [option, setOption] = useState(null);
  return (
    <div>
      <label htmlFor="option-select">Select Option</label>
      <Select
        value={option}
        options={options}
        onChange={option => setOption(option)}
      />
      {option && <div>{option.label}</div>}
    </div>
  );
}

export default TestApp;

Je ne sais même pas ce que je dois demander. Est-ce l'entrée cachée?

reactjsjestjsreact-selectreact-hooksreact-testing-library
7
jktravis

Vous pouvez essayer ce qui suit pour le faire fonctionner:

  1. Déclenchez un événement de focus sur l'élément d'entrée ReactSelect .react-select.
  2. Déclenchez un événement mouseDown sur l'élément .react-select__control
  3. Tirez un clic sur l'élément d'option que vous souhaitez sélectionner

Vous pouvez ajouter un accessoire className et classNamePrefix avec la valeur "react-select" afin de sélectionner spécifiquement le composant que vous essayez de tester.

PS: Au cas où vous seriez toujours coincé, je vous encourage à jeter un œil à cette conversation d'où la réponse ci-dessus est empruntée - https://spectrum.chat/react -testing-library/general/testing-react-select ~ 5857bb70-b3b9-41a7-9991-83f782377581

1
bitsapien