trigger react-ace onChange via React Testing Library (RTL)

Question

in my code, i have component that using react-ace. in my render function i have this row:

<CodeEditor onChange={onCodeChanged} value={code} />

callback function:

const onCodeBodyChanged = (newCode) => {
      // some code ...
      dispatch(setResource({ newCode }));
}

I want to test onCodeChanged via RTL, so I tried to find the text area on change the value, but without any success

example of (not working) test:

      const { container } = render(<ResourceEditorPanel />, createMockStore());
      const ace = container.querySelectorAll('.ace_text-input');
      fireEvent.change(ace, { target: { value: 'someText' } });
      await waitFor(() => {
        expect(dispatch).toHaveBeenCalled();
      });

the problem is fireEvent.change(ace, { target: { value: 'someText' } }); doesn't trigger my function - onCodeChanged.

Do you know how can I test it?

score 1 · Answer 1 · answered Sep 08 '22 at 00:28

1

I spent far too much time on this :/ in the end my issue was a small one. The element that should have the data pasted into it is the class "ace_content". The following worked for me.

const editorInputField = container.querySelector('[class="ace_content"]') as Element;

fireEvent.click(editorInputField);

await userEvent.click(editorInputField);
await userEvent.paste('{ "name": "Test" }')

answered Sep 08 '22 at 00:28

Ray

1,134
10
27

`fireEvent.click(editorInputField);` was not necessary for me. – dominik Dec 02 '22 at 13:59
A note to those who come here looking for a solution to their problem, the API of `UserEvent.paste` has changed in testing-library v14 (from `paste(element, text)` to `paste(text)`); make sure to click or focus the element you want to paste into. – Rin Mar 30 '23 at 12:43

score -1 · Answer 2 · answered May 18 '21 at 15:18

-1

Ace editor awaits for an input event so you'll also need to fire something like fireEvent(ace, new Event('input'))

answered May 18 '21 at 15:18

Craveiro

503
5
15

trigger react-ace onChange via React Testing Library (RTL)

2 Answers2