时间戳

首页 > 解决方案 > 使用 testing-library 测试 cleave.js 组件

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

问题描述

我正在尝试使用测试库测试组件。我面临的问题是如何在input. 通常这可以通过以下方式实现：

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

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

但在我的情况下，我使用库cleave.js来格式化输入，似乎fireEvent.change无法引入文本。

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

标签： reactjsreact-testing-librarytesting-librarycleave

解决方案

我建议您使用@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');
});

推荐阅读