Как вызвать событие изменения в компоненте реагировать на выбор с помощью библиотеки реагирования на тестирование?

Question

Учитывая, что я не могу тестировать внутреннее устройство напрямую с помощью 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;

Я даже не уверен, к чему мне обращаться.Это скрытый ввод?

Answer 1

У моей команды есть тестовая утилита в нашем проекте, которая позволяет нам легко выбирать элемент, потратив слишком много времени, пытаясь понять, как это сделать правильно.Вы можете поделиться этим здесь, чтобы надеяться помочь другим.

Это не зависит от каких-либо внутренних воздействий или насмешек React Select, но требует, чтобы вы установили <label>, который имеет for, связывающий со входом React Select,Он использует метку для выбора заданного значения выбора точно так же, как и пользователь на реальной странице.

const KEY_DOWN = 40

// Select an item from a React Select dropdown given a label and
// choice label you wish to pick.
export async function selectItem(
  container: HTMLElement,
  label: string,
  choice: string
): Promise<void> {
  // Focus and enable the dropdown of options.
  fireEvent.focus(getByLabelText(container, label))
  fireEvent.keyDown(getByLabelText(container, label), {
    keyCode: KEY_DOWN,
  })

  // Wait for the dropdown of options to be drawn.
  await findByText(container, choice)

  // Select the item we care about.
  fireEvent.click(getByText(container, choice))

  // Wait for your choice to be set as the input value.
  await findByDisplayValue(container, choice)
}

Он может использоваться следующим образом:

it('selects an item', async () => {
  const { container } = render(<MyComponent/>)

  await selectItem(container, 'My label', 'value')
})

Answer 2

Вы можете попробовать следующее, чтобы заставить его работать:

1. Событие пожарной фокусировки для компонента ReactSelect. Входной элемент .react-select.
2. Запустите событие mouseDown для .react-select__control element
3. Создать щелчок на элементе опции, который вы хотите выбрать

Вы можете добавить реквизиты className и classNamePrefix со значением «act-select », чтобыопределенно выберите компонент, который вы пытаетесь протестировать.

PS: Если вы все еще застряли, я бы посоветовал вам взглянуть на этот разговор, откуда заимствован вышеуказанный ответ - https://spectrum.chat/react-testing-library/general/testing-react-select~5857bb70-b3b9-41a7-9991-83f782377581