dillon1000/react
Commit
Browse files Use native event dispatching instead of Simulate or SimulateNative (#13023)
* Use native event dispatching instead of Simulate or SimulateNative
In #12629 @gaearon suggested that it would be better to drop usage of
`ReactTestUtils.Simulate` and `ReactTestUtils.SimulateNative`. In this
PR I’m attempting at removing it from a lot of places with only a few
leftovers.
Those leftovers can be categorized into three groups:
1. Anything that tests that `SimulateNative` throws. This is a property
that native event dispatching doesn’t have so I can’t convert that
easily. Affected test suites: `EventPluginHub-test`,
`ReactBrowserEventEmitter-test`.
2. Anything that tests `ReactTestUtils` directly. Affected test suites:
`ReactBrowserEventEmitter-test` (this file has one test that reads
"should have mouse enter simulated by test utils"),
`ReactTestUtils-test`.
3. Anything that dispatches a `change` event. The reason here goes a bit
deeper and is rooted in the way we shim onChange. Usually when using
native event dispatching, you would set the node’s `.value` and then
dispatch the event. However inside [`inputValueTracking.js`][] we
install a setter on the node’s `.value` that will ignore the next
`change` event (I found [this][near-perfect-oninput-shim] article
from Sophie that explains that this is to avoid onChange when
updating the value via JavaScript).
All remaining usages of `Simulate` or `SimulateNative` can be avoided
by mounting the containers inside the `document` and dispatching native
events.
Here some remarks:
1. I’m using `Element#click()` instead of `dispatchEvent`. In the jsdom
changelog I read that `click()` now properly sets the correct values
(you can also verify it does the same thing by looking at the
[source][jsdom-source]).
2. I had to update jsdom in order to get `TouchEvent` constructors
working (and while doing so also updated jest). There was one
unexpected surprise: `ReactScheduler-test` was relying on not having
`window.performance` available. I’ve recreated the previous
environment by deleting this property from the global object.
3. I was a bit confused that `ReactTestUtils.renderIntoDocument()` does
not render into the document 🤷
[`inputValueTracking.js`]: https://github.com/facebook/react/blob/392530104c00c25074ce38e1f7e1dd363018c7ce/packages/react-dom/src/client/inputValueTracking.js#L79
[near-perfect-oninput-shim]: https://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html
[jsdom-source]: https://github.com/jsdom/jsdom/blob/45b77f5d21cef74cad278d089937d8462c29acce/lib/jsdom/living/nodes/HTMLElement-impl.js#L43-L76
* Make sure contains are unlinked from the document even if the test fails
* Remove unnecessary findDOMNode callsChanged paths23 files
First-parent comparisonpackage.json ModifiedM packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js ModifiedM packages/react-dom/src/__tests__/ReactComponent-test.js ModifiedM packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js ModifiedM packages/react-dom/src/__tests__/ReactCompositeComponent-test.js ModifiedM packages/react-dom/src/__tests__/ReactCompositeComponentNestedState-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOM-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMFiber-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMIframe-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMInput-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMOption-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMSelect-test.js ModifiedM packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js ModifiedM packages/react-dom/src/__tests__/ReactEventIndependence-test.js ModifiedM packages/react-dom/src/__tests__/ReactIdentity-test.js ModifiedM packages/react-dom/src/__tests__/ReactServerRenderingHydration.js ModifiedM packages/react-dom/src/__tests__/ReactTestUtils-test.js ModifiedM packages/react-dom/src/__tests__/refs-test.js ModifiedM packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js ModifiedM packages/react-dom/src/events/__tests__/SyntheticEvent-test.js ModifiedM packages/react-dom/src/events/__tests__/TapEventPlugin-test.internal.js ModifiedM packages/react-scheduler/src/__tests__/ReactScheduler-test.js ModifiedM yarn.lock ModifiedPatch
Files changed
Rendering syntax-highlighted changes…