相关疑难解决方法(0)

App.js

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

const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
  return { value: e, label: e };
});

class App extends Component {
  state = {
    selected: SELECT_OPTIONS[0].value
  };

  handleSelectChange = e => {
    this.setState({ selected: e.value });
  };

  render() {
    const { selected } = this.state;
    const value = { value: selected, label: selected };
    return (
      <div className="App">
        <div data-testid="select">
          <Select
            multi={false}
            value={value}
            options={SELECT_OPTIONS}
            onChange={this.handleSelectChange}
          />
        </div>
        <p data-testid="select-output">{selected}</p> …

鉴于我无法直接使用内部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;

我什至不确定我应该查询什么。是隐藏的输入吗？