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

Gio Polvara · Accepted Answer · 2019-04-10 12:20:32Z

8

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.

answered Apr 10, 2019 at 12:20

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shibasis Sengupta Over a year ago

I am getting this error now - "The given element does not have a value setter", at this line - fireEvent.change(inputBox, { target: { value: '1234567' } });

Gio Polvara Over a year ago

Are you sure inputBox is what you expect it to be?

Shibasis Sengupta Over a year ago

Is there a way to print log using this library... I could not find enough docs on this

Gio Polvara Over a year ago

const { debug } = render() by default if you call debug() you will get the whole DOM printed. You can also to debug(inputBox)

venkatasatish chakkirala · Accepted Answer · 2021-12-08 00:21:34Z

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

answered Dec 8, 2021 at 0:21

venkatasatish chakkirala

211 bronze badge

1 Comment

sigmus Over a year ago

Welcome to SO? Can you explain what your problem is in the question?

Nagama Inamdar · Accepted Answer · 2024-02-27 15:08:32Z

0

By Writing

const inputElement = screen
      .getByTestId('textarea-provided-test-id')
      .querySelector('input');

Solved my problem Reference link

answered Feb 27, 2024 at 15:08

Nagama Inamdar

2,85522 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

fireevent problem in react-testing-library

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related