使用testing-library测试cleave.js组件

Question

我正在尝试用test -library测试一个组件。我面临的问题是如何在input中自动引入文本。通常，这可以通过以下方式实现：

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

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

但是在我的例子中，我使用库cleave.js来格式化输入，并且似乎fireEvent.change不能引入文本。

有人知道如何解决这个问题吗？

Answer 1

我建议你使用@testing-library/user-event来测试像这样的交互。

假设您有以下组件，该组件呈现一个Cleave.js信用卡输入。

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

您可以在测试中使用@testing-library/user-event的type函数来模拟用户的输入。

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');
});

Answer 2

这就是我如何让我的代码以多步骤的形式工作，其中步骤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

})