web-dev-qa-db-ja.com

react-testing-libraryを使用してreact-selectコンポーネントでchangeイベントをトリガーするにはどうすればよいですか？

react-testing-libraryを使用して内部を直接テストできない場合、react-selectを使用するコンポーネントをテストするにはどうすればよいですか？たとえば、従来のreact-selectをレンダリングしない<select/>の値に基づく条件付きレンダリングがある場合でも、変更をトリガーできますか？

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;

何を問い合わせればいいのかよくわかりません。それは隠された入力ですか？

reactjsjestjsreact-selectreact-hooksreact-testing-library
7
jktravis

あなたはそれを機能させるために以下を試すことができます：

  1. ReactSelectコンポーネントの.react-select入力要素でフォーカスイベントを起動します。
  2. .react-select__control要素でmouseDownイベントを発生させる
  3. 選択するオプション要素をクリックして起動します

テストしようとしているコンポーネントを具体的に選択するために、「react-select」の値を持つclassNameおよびclassNamePrefixプロップを追加できます。

PS：まだ行き詰まっている場合は、上記の回答を借りたところからこの会話を確認することをお勧めします- https://spectrum.chat/react -testing-library/general/testing-react-select〜5857bb70-b3b9-41a7-9991-83f782377581

1
bitsapien