Протестируйте компонент cleave.js с помощью тестовой библиотеки

Я пытаюсь протестировать компонент с помощью библиотеки тестирования. Проблема, с которой я столкнулся, заключается в том, как автоматически вводить текст в файл input. Обычно это может быть достигнуто за счет:

const inputName = screen.getByPlaceholderText(/name/i)

fireEvent.click(inputName)
fireEvent.change(inputName, { target: { value: 'test name' } })

Но в моем случае я использую библиотеку cleave.js для форматирования ввода и кажется, что fireEvent.change не может ввести текст.

Кто-нибудь знает, как решить эту проблему?


reactjs react-testing-library testing-library cleave
person Andrés    schedule 17.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я бы рекомендовал вам использовать @testing-library/user-event для тестирования таких взаимодействий.

Предположим, у вас есть следующий компонент, который обрабатывает данные кредитной карты Cleave.js.

const TestComponent = () => {
  return (
    <Cleave placeholder="Enter CC number" options={{ creditCard: true }} />
  );
};

Вы можете использовать функцию type @testing-library/user-event в своем тесте для имитации набора текста пользователем.

import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('tests formatted input', () => {
    render(<TestComponent />);
    const input = screen.getByPlaceholderText('Enter CC number');
    userEvent.type(input, '123412345123456');
    expect(input.value).toBe('1234 12345 123456');
});
person juliomalves    schedule 18.03.2021

arrow_upward
0
arrow_downward

вот как я заставил свою работу работать в многошаговой форме, где в шаге 1 был компонент cleave.js внутри него. Использование react-hook-form для библиотеки форм

 it('should test formatted input', async () => {
const { getByTestId } = render(<ProviderTestComponent><Step1 {...defaultProps} /></ProviderTestComponent>)

const arrayOfInputs = [
  {
    dataTestId: 'test',
    testInput: '12345'
  },
  {
    dataTestId: 'test.day',
    testInput: '11'
  },
  {
    dataTestId: 'test.month',
    testInput: '11'
  },
  {
    dataTestId: 'test.year',
    testInput: '1950'
  },

]

arrayOfInputs.forEach((item) => {
  const inputField = getByTestId(item.dataTestId)
  userEvent.type(inputField, item.testInput) 
})

const nextButton = getByTestId('step1-next')
fireEvent.click(nextButton)

await waitFor(() => expect(handleOnSubmitMock).toHaveBeenCalled()) 
// ^ this needs to be awaited else the validation won't run for react-hook-form before cleave.js is finished

})
person Vincent Tang    schedule 11.06.2021