Как протестировать редукс-форму с использованием библиотеки реагирования-тестирования - PullRequest
Новая
       13

Как протестировать редукс-форму с использованием библиотеки реагирования-тестирования

0 голосов
/ 16 июня 2019

Я пытаюсь протестировать код, являющийся частью избыточной формы, используя библиотеку реагирования-тестирования.Вызов fireEvent.change для полей ввода текста для установки новых значений. Я ожидаю, что значения ввода должны быть обновлены, но этого никогда не происходит.Пожалуйста, найдите фрагмент теста ниже.Полный код можно найти по адресу https://codesandbox.io/s/redux-form-simple-example-n3820 Какие-нибудь хорошие примеры, как тестировать редукс-форму с использованием библиотеки-реакции-тестирования?

... 

const firstNameInput = getByTestId(container, "firstName");
const lastNameInput = getByTestId(container, "lastName");

const firstName = "firstName";
const lastName = "lastName";

fireEvent.change(firstNameInput, { target: { value: firstName } });
fireEvent.change(lastNameInput, { target: { value: lastName } });

const submitButton = getByTestId(container, "submitButton");
fireEvent.click(submitButton);

expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenNthCalledWith(firstName, lastName);

1 Ответ

0 голосов
/ 16 июня 2019

Проблема в том, что вы делаете fireEvent.click(submitButton), который запускает событие click на кнопке. Ваша форма не прослушивает это событие, а прослушивает событие отправки в форме. Вы должны сделать это вместо fireEvent.submit(formElement).

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

Нет необходимости импортировать getByTestId, вы получите его из render: 

// Before
import { render, getByTestId } from '@testing-library/react'
const { container } = render(<Component />)
getByTestId(container, 'foo')

// After
import { render } from '@testing-library/react'
const { getByTestId } = render(<Component />)
getByTestId('foo')

Говоря о getByTestId, вы должны использовать его как последнее средство. В вашем случае гораздо лучше использовать getByLabelText для получения входных данных и getByText для поиска кнопки. Чтобы получить form, вы можете использовать getByText('Submit').closest('form').

Вам следует использовать метод cleanup, чтобы избежать проблем в ваших тестах.

...