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;
何を問い合わせればいいのかよくわかりません。それは隠された入力ですか?
あなたはそれを機能させるために以下を試すことができます:
テストしようとしているコンポーネントを具体的に選択するために、「react-select」の値を持つclassNameおよびclassNamePrefixプロップを追加できます。
PS:まだ行き詰まっている場合は、上記の回答を借りたところからこの会話を確認することをお勧めします- https://spectrum.chat/react -testing-library/general/testing-react-select〜5857bb70-b3b9-41a7-9991-83f782377581