Как запустить событие изменения в компоненте response-select с библиотекой response-testing-library?

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

Я даже не знаю, что мне делать с запросом. Это скрытый ввод?


reactjs jestjs react-hooks react-select react-testing-library
person jktravis    schedule 24.02.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

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

person bitsapien    schedule 24.02.2019
comment
Я видел упоминание @gpx в этой ветке, чтобы посмеяться над ним. Не думаю, что когда-либо высмеивал компонент. Работает так же? - person jktravis; 24.02.2019
comment
Спасибо. Я нашел этот тоже в спектре, в котором есть пример теста. . - person jktravis; 24.02.2019

arrow_upward
13
arrow_downward

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

Это не полагается на какие-либо внутренние компоненты или насмешки 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')
})
person Daniel    schedule 10.05.2019
comment
Этот ответ был извлечен в пакет npm: github.com/romgain/react-select-event < / а> - person ArthurDenture; 14.02.2020