无法使用 Jest 单元测试在 Input 中模拟用户类型。 fireEvent、userEvent 不起作用

Question

我有一个输入字段，并希望在单元测试期间刺激输入。 尝试了互联网上推荐的所有方法，但仍然没有运气，这是我的代码：

// In component
<div className="input-area">
                    <div className="subtitle">Put your answer here</div>
                    <Input onChange={({detail}) => onInputChange(detail.value)}
                           value={name}  data-testid="add-input"/>
                </div>
    

// In test
    test("the input field should take user's input", async () => {
        render(<testModal />);
        const inputMessage = screen.getByTestId("add-input");
        inputMessage.focus(); // take this line off has no effect
        await userEvent.keyboard("testTyping");
    
        expect(inputMessage).toHaveValue("testTyping");
    });

还尝试使用fireEvent.change和userEvent.type但没有运气。 错误是Expected the element to have value: testTyping Received: undefined感谢任何帮助！

Answer 1

从文档键盘（文本，选项） ：

如果您只想模拟键盘上的按键，则应该使用userEvent.keyboard 。 如果您只想方便地将一些文本插入输入字段或文本区域，则应该使用userEvent.type 。

尝试：

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

test("the input field should take user's input", async () => {
  render(<testModal />);
  await userEvent.type(screen.getByTestId("add-input"), 'testTyping');
  expect(inputMessage).toHaveValue("testTyping");
})