Лучший способ проверить входное значение в dom-testing-library или react-testing-library

Question

Как лучше всего проверить значение элемента <input> в dom-testing-library / react-testing-library?

Подход, который я использовал, - это получить необработанный элемент ввода сам через метод closest(), который затем дает мне прямой доступ к атрибуту value:

const input = getByLabelText("Some Label")
expect(input.closest("input").value).toEqual("Some Value")

Я надеялся, что есть способ, которым я смогу это сделать без прямого доступа к атрибутам HTML . Не похоже, что это было в духе библиотеки тестирования. Возможно, что-то вроде jest-dom toHaveTextContent matcher matcher:

const input = getByLabelText("Some Label")
expect(input).toHaveTextContent("Some Value")

ОБНОВЛЕНИЕ

На основании запроса в комментариях, вот пример кода, показывающий ситуацию, когда я почувствовал необходимость проверить значение в поле ввода.

Это упрощенная версия модального компонента, который я создал в своем приложении. Типа, очень упрощено. Вся идея здесь в том, что модальное окно открывается с вводом, предварительно заполненным некоторым текстом, на основе строкового свойства. Пользователь может свободно редактировать этот ввод и отправлять его, нажав кнопку. Но если пользователь закроет модальное окно, а затем снова откроет его, я бы хотел, чтобы текст был сброшен на эту исходную строковую опору. Я написал для этого тест, потому что предыдущая версия модального НЕ сбрасывала входное значение.

Я пишу это на TypeScript, чтобы типы каждой опоры были очень ясными.

interface Props {
  onClose: () => void
  isOpen: boolean
  initialValue: string
}

export default function MyModal({ onClose, isOpen, initialValue }) {
  const [inputValue, setInputValue] = useState(initialValue)

  // useEffect does the reset!
  useEffect(() => {
    if (!isOpen) {
      setNameInput(initialValue)
    }
  }, [isOpen, initialValue])

  return (
    <SomeExternalLibraryModal isOpen={isOpen} onClose={onClose}>
      <form>
        <input
          value={inputValue}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            setInputValue(e.target.value)
          }
        />
        <button onClick={onClose}>Cancel</button>
      </form>
    </SomeExternalLibraryModal>
  )
}

Answer 1

Вы правы, подозревая свой метод тестирования в отношении того, как эта библиотека тестирования хочет, чтобы вы тестировали. Самый простой ответ на этот вопрос - использовать запрос getByDisplayValue. Он будет искать ввод, текстовое поле или выбор, который имеет значение, которое вы пытаетесь найти. Например, используя ваш компонент в качестве примера, если бы я пытался проверить, что inputValue = 'test', я бы выполнял поиск как

expect(screen.getByDisplayValue('test')).toBeInTheDocument();

Это все, что вам нужно сделать. Я предполагаю, что ваш тест отображает только компонент MyModal. Даже если у вас есть несколько входов, это не имеет значения с точки зрения философии тестирования. Пока getByDisplayValue находит какой-либо ввод с этим значением, это успешный тест. Если у вас есть несколько входов и вы хотите проверить, что конкретный вход имеет значение, вы можете затем копаться в элементе, чтобы определить, что это правильный вход:

примечание: вам понадобится jest-dom, чтобы это работало . expect(screen.getByDisplayValue('test')).toHaveAttribute('id', 'the-id');

или (без jest-dom):

expect(screen.getByDisplayValue('test').id).toBe('the-id');

Конечно, вы можете искать любой атрибут, который вам нравится.

Один Последняя альтернатива для проверки значения - найти вход по роли. Это не сработает в случае вашего примера, если вы не добавите метку и не присоедините ее к своему вводу через атрибут htmlFor. Затем вы можете протестировать его так:

expect(screen.getByRole('input', { name: 'the-inputs-id' })).toHaveValue('test');

или (без jest-dom):

expect(screen.getByRole('input', { name: 'the-inputs-id' }).value).toBe('test');

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