react-testing-library中的fireevent问题

Question

我正在为我的 react 应用程序使用 react-testing-library。 在一个测试用例中，我需要在文本框中填充一些值并聚焦。

这是测试脚本-

it('searchbox wrapper',async()=>{
    let wrapper=getSearchBoxWrapperInstance('')
    let inputBox=wrapper.findByTestId('inputText');
    inputBox.value='12345';
    fireEvent(inputBox,'focusOut');

})

运行测试用例时出现以下错误 -

TypeError: element.dispatchEvent is not a function

  79 |     let inputBox=wrapper.findByTestId('inputText');
  80 |     inputBox.value='12345';
> 81 |     fireEvent(inputBox,'focusOut');
     |     ^
  82 |     //fireEvent('Blur',
  83 | 
  84 |     //await (() => wrapper.getByText('')))

  at fireEvent (node_modules/dom-testing-library/dist/events.js:533:18)

如果我可以提供更多信息，请告诉我

Answer 1

我假设getSearchBoxWrapperInstance 返回render 的结果。

试试这是否可行：

it('searchbox wrapper',async()=>{
  let wrapper=getSearchBoxWrapperInstance('')
  let inputBox=wrapper.findByTestId('inputText');
  fireEvent.change(inputBox, { target:  { value: '12345' } });
  fireEvent.focusOut(inputBox);
  // In alternative you could try fireEvent.blur
})

findByTestId 也有可能找不到您的元素。尝试将其注销以查看是否是这种情况或使用getByTestId，如果找不到该元素，则会出错。

Answer 2

// import ing userevent
import userEvent from '@testing-library/user-event';
// detecting the input in component by the placeholder name
const input = screen.queryByPlaceholderText('input placeholder 
name');
// entering data in the userEvent
userEvent.type(input,'typing some value into the input');
// invoking blur functiuonality.
fireEvent.blur(input);