With event does not override currentTarget

[salomvary]

I expected this to pass:

        it('calls events with currentTarget', () => {

            const EventTargetComponent = () => {
                const [value, setValue] = useState();
                const handleChange = (event) => setValue(event.currentTarget.value);
                return <div><input onChange={handleChange} value="before-change"/><span>{value}</span></div>;
            }

            expect(<EventTargetComponent/>, 'when deeply rendered', 'with event',
                  'change', { currentTarget: {value: 'test'} }, 'on', <input/>, 'to have rendered',
                <div>
                    <input/>
                    <span>test</span>
                </div>);
        });

But it failed with this:

  2) unexpected-react (deep rendering) with events calls events with currentTarget:
     UnexpectedError: 
expected <EventTargetComponent />
when deeply rendered with event 'change', { currentTarget: { value: 'test' } } on <input /> to have rendered <div><input /><span>test</span></div>

<EventTargetComponent>
  <div>
    <input onChange={function handleChange(event) { /* ... */ }} value="before-change" />
    <span>
      before-change // before-change
                    // test
    </span>
  </div>

Does this maybe mean the deep renderer does not allow triggering events with arbitrary properties? The documentation suggests that it should be possible..

[bruderstein]

The documentation is actually this link: http://bruderstein.github.io/unexpected-react/assertions/RenderedReactElement/with-event/ - this also should be made clearer, not every property can be overridden. It uses react-dom/test-utils Simulate so not all properties are overridable - currentTarget being one of them as that is created as part of the event.

[bmhardy]

Hi Dave I was curious, have you ever looked at what it would take for unexpectedreact to work on snabbdom? Do you have any thoughts about this? Thank you Brian

[bruderstein]

@bmhardy No (I had to Google snabbdom), but it's actually straightforward, as all the real work is in unexpected-htmllike, and then there is just adapters for react elements, DOM elements and things like snapshot elements. See unexpected-preact for example of implementing it for another virtual DOM implementation.

(Next time, it would be better to open a new issue rather than commenting on an unrelated issue)

[salomvary]

The documentation is actually this link: http://bruderstein.github.io/unexpected-react/assertions/RenderedReactElement/with-event/ - this also should be made clearer, not every property can be overridden. It uses react-dom/test-utils Simulate so not all properties are overridable - currentTarget being one of them as that is created as part of the event.

I see. Now I wonder what the unexpected-react equivalent of this test-utils example is:

// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);