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

Problem

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?

[zaharzagrava]

@asso1985 No.

[IvanKalinin]

I was able to test it by using the paste event rather than change. And here is what I do:

Component:

<AceEditor
    ...
    placeholder={process.env.NODE_ENV === 'test' ? 'Enter your text' : ''}
    ...
  />

Test:

....
import userEvent from '@testing-library/user-event';
.....
const aceTextareaPlaceholder = getByText('Enter your text');
const aceTextarea = aceTextareaPlaceholder.parentElement?.parentElement?.querySelector(
  'textarea'
) as HTMLTextAreaElement;

userEvent.paste(aceTextarea, 'Your text goes here');