fireevent problem in react-testing-library

Question

I am using react-testing-library for my react app. In one test case, I need to fill some value in a textbox and focusout.

Here is the test script -

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

})

I am getting the following error when I run the test case -

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)

Please let me know if I can provide further information

Answer 1

I'm assuming getSearchBoxWrapperInstance returns the result of render.

Try if this works:

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

It's also possible that findByTestId doesn't find your element. Try to log it out to see if that's the case or use getByTestId which errors our if the element is not found.