I can't get JSONForms to simulate change event in react testing library

General
1

Thanks to this answer I can now render the form in react testing:
jsonforms.discourse.group/t/jsonforms-unit-test-renders-empty-div/1436/3

However, I can’t get the state updated using various change events:

var allInputs = await screen.findAllByText((content, element) => element.tagName.toLowerCase() === ‘input’);
allInputs = allInputs.filter((e) => e.id.includes(“key”) || e.id.includes(“value”) || e.id.includes(“option”))

//fireEvent.change(allInputs[0], {target: {value: "hello"}})
//Simulate.change(allInputs[0], {target: {value: "hello"}})
//userEvent.clear(allInputs[0]); 
//userEvent.type(allInputs[0], "hello")

none of them updates the state … what am I missing here?

Edit: Even if I use enzyme, mount and simulate the data state bound to the form with onChange is still empty

Thanks
KIC

2

Interestingly, I found this SO question: javascript - React Testing Library - fireEvent doesn't change input value - Stack Overflow and it looks like that the JSONForms input fields are also rendered without the onChange attribute:

from screen.debug()

                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"
                        id="#/properties/ext_id-input"
                        type="text"
                        value=""
                      />
3

Hi @KIC,

how are you testing the state update?

JSON Forms will emit a new data object when an input is modified and not modify the old data handed over. So the test must be written against this new data object.

This is what we do in some of our tests, i.e. we add a special TestEmitter so we get access to the updated data within the test. We then check that data after a small timeout.

4

Actually, I am passing a callback function to a submit button rendered under the jsonform. The submit action will pass the current state of the form data. I am doing assertions in the callback function. But the callback never gets called with the expected data. Interestingly enough it works fine in the browser with human interactions.