How to fire onChange event on custom components using react-testing-library?

Question

I'm using this component:

<AceEditor
  value={data}
  className="code-editor"
  mode="json"
  theme="dracula"
  onChange={setData}
  name="data"
  height="320px"
  width="100%"
  editorProps={{ $blockScrolling: true }}
  showPrintMargin={false}
  highlightActiveLine={false}
/>

So, using react-testing-library how can I get this component and fire an onChange event? I tried to find some function like getByComponentName or similar but without success.

need more info, if u are using react-ace, github.com/securingsincity/react-ace. Declare a function and call it on onChange — Saahithyan Vigneswaran
– Saahithyan Vigneswaran, Commented Feb 6, 2019 at 18:47
Ok @SaahithyanVigneswaran but how can I trigger this function on the spec? — Bruno Quaresma
– Bruno Quaresma, Commented Feb 6, 2019 at 18:54

Gio Polvara · Accepted Answer · 2019-02-07 09:07:22Z

4

in RTL you don't really do that.

The suggested approach is to simulate what a user would do. For example, if AceEditor renders a textarea you can use fireEvent.change to simulate a user typing. At that point, your component will fire the onChange event and react as it would in production.

Some 3rd party components might be too hard to test with this approach because they have an internal structure that you don't control. In those cases, I suggest to just mock them out. In the end, they are already tested by their maintainers.

In your case, you could use jest.mock and render a textarea instead of your editor.

answered Feb 7, 2019 at 9:07

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

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

1 Comment

Raihan Parlaungan Over a year ago

is this really works? i can't mock the AceEditor, becaus when i mock the AceEditor it override all the ace-builds import, can anyone help me with this? or do you have any article how to mock AceEditor with textarea?

Collectives™ on Stack Overflow

How to fire onChange event on custom components using react-testing-library?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related