diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
index ebc48625a9495..bc7316349196a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -11,12 +11,12 @@
let React;
let Scheduler;
-let ReactCache;
+// let ReactCache;
let ReactDOM;
-let Suspense;
+// let Suspense;
let originalCreateElement;
-let TextResource;
-let textResourceShouldFail;
+// let TextResource;
+// let textResourceShouldFail;
let images = [];
let onLoadSpy = null;
@@ -48,21 +48,21 @@ function Text(props) {
return props.text;
}
-function AsyncText(props) {
- const text = props.text;
- try {
- TextResource.read([props.text, props.ms]);
- Scheduler.unstable_yieldValue(text);
- return text;
- } catch (promise) {
- if (typeof promise.then === 'function') {
- Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
- } else {
- Scheduler.unstable_yieldValue(`Error! [${text}]`);
- }
- throw promise;
- }
-}
+// function AsyncText(props) {
+// const text = props.text;
+// try {
+// TextResource.read([props.text, props.ms]);
+// Scheduler.unstable_yieldValue(text);
+// return text;
+// } catch (promise) {
+// if (typeof promise.then === 'function') {
+// Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+// } else {
+// Scheduler.unstable_yieldValue(`Error! [${text}]`);
+// }
+// throw promise;
+// }
+// }
function Img({src: maybeSrc, onLoad, useImageLoader, ref}) {
const src = maybeSrc || 'default';
@@ -82,14 +82,14 @@ function loadImage(element) {
element.dispatchEvent(event);
}
-describe.only('ReactDOMImageLoad', () => {
+describe('ReactDOMImageLoad', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
Scheduler = require('scheduler');
- ReactCache = require('react-cache');
+ // ReactCache = require('react-cache');
ReactDOM = require('react-dom');
- Suspense = React.Suspense;
+ // Suspense = React.Suspense;
onLoadSpy = jest.fn(reactEvent => {
const src = reactEvent.target.getAttribute('src');
@@ -102,54 +102,54 @@ describe.only('ReactDOMImageLoad', () => {
nativeEvent.__originalDispatch = false;
});
- TextResource = ReactCache.unstable_createResource(
- ([text, ms = 0]) => {
- let listeners = null;
- let status = 'pending';
- let value = null;
- return {
- then(resolve, reject) {
- switch (status) {
- case 'pending': {
- if (listeners === null) {
- listeners = [{resolve, reject}];
- setTimeout(() => {
- if (textResourceShouldFail) {
- Scheduler.unstable_yieldValue(
- `Promise rejected [${text}]`,
- );
- status = 'rejected';
- value = new Error('Failed to load: ' + text);
- listeners.forEach(listener => listener.reject(value));
- } else {
- Scheduler.unstable_yieldValue(
- `Promise resolved [${text}]`,
- );
- status = 'resolved';
- value = text;
- listeners.forEach(listener => listener.resolve(value));
- }
- }, ms);
- } else {
- listeners.push({resolve, reject});
- }
- break;
- }
- case 'resolved': {
- resolve(value);
- break;
- }
- case 'rejected': {
- reject(value);
- break;
- }
- }
- },
- };
- },
- ([text, ms]) => text,
- );
- textResourceShouldFail = false;
+ // TextResource = ReactCache.unstable_createResource(
+ // ([text, ms = 0]) => {
+ // let listeners = null;
+ // let status = 'pending';
+ // let value = null;
+ // return {
+ // then(resolve, reject) {
+ // switch (status) {
+ // case 'pending': {
+ // if (listeners === null) {
+ // listeners = [{resolve, reject}];
+ // setTimeout(() => {
+ // if (textResourceShouldFail) {
+ // Scheduler.unstable_yieldValue(
+ // `Promise rejected [${text}]`,
+ // );
+ // status = 'rejected';
+ // value = new Error('Failed to load: ' + text);
+ // listeners.forEach(listener => listener.reject(value));
+ // } else {
+ // Scheduler.unstable_yieldValue(
+ // `Promise resolved [${text}]`,
+ // );
+ // status = 'resolved';
+ // value = text;
+ // listeners.forEach(listener => listener.resolve(value));
+ // }
+ // }, ms);
+ // } else {
+ // listeners.push({resolve, reject});
+ // }
+ // break;
+ // }
+ // case 'resolved': {
+ // resolve(value);
+ // break;
+ // }
+ // case 'rejected': {
+ // reject(value);
+ // break;
+ // }
+ // }
+ // },
+ // };
+ // },
+ // ([text, ms]) => text,
+ // );
+ // textResourceShouldFail = false;
images = [];
@@ -442,67 +442,67 @@ describe.only('ReactDOMImageLoad', () => {
expect(onLoadSpy).not.toHaveBeenCalled();
});
- fit('captures the load event if it happens in a suspended subtree and replays it between layout and passive effects on resumption', async function() {
- function SuspendingWithImage() {
- Scheduler.unstable_yieldValue('SuspendingWithImage');
- return (
- }>
-
-
-
-
-
- );
- }
-
- const container = document.createElement('div');
- const root = ReactDOM.createRoot(container);
-
- React.startTransition(() => root.render());
-
- expect(Scheduler).toFlushAndYield([
- 'SuspendingWithImage',
- 'Suspend! [A]',
- 'render start',
- 'Img default',
- 'Loading...',
- ]);
- let img = last(images);
- loadImage(img);
- expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
- expect(onLoadSpy).not.toHaveBeenCalled();
-
- // Flush some of the time
- jest.advanceTimersByTime(50);
- // Still nothing...
- expect(Scheduler).toFlushWithoutYielding();
-
- // Flush the promise completely
- jest.advanceTimersByTime(50);
- // Renders successfully
- expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-
- expect(Scheduler).toFlushAndYieldThrough([
- 'A',
- // img was recreated on unsuspended tree causing new load event
- 'render start',
- 'Img default',
- 'last layout',
- ]);
-
- expect(images.length).toBe(2);
- img = last(images);
- expect(img.__needsDispatch).toBe(true);
- loadImage(img);
- expect(Scheduler).toHaveYielded([
- 'actualLoadSpy [default]',
- 'onLoadSpy [default]',
- ]);
-
- expect(Scheduler).toFlushAndYield(['last passive']);
-
- expect(onLoadSpy).toHaveBeenCalledTimes(1);
- });
+ // it('captures the load event if it happens in a suspended subtree and replays it between layout and passive effects on resumption', async function() {
+ // function SuspendingWithImage() {
+ // Scheduler.unstable_yieldValue('SuspendingWithImage');
+ // return (
+ // }>
+ //
+ //
+ //
+ //
+ //
+ // );
+ // }
+
+ // const container = document.createElement('div');
+ // const root = ReactDOM.createRoot(container);
+
+ // React.startTransition(() => root.render());
+
+ // expect(Scheduler).toFlushAndYield([
+ // 'SuspendingWithImage',
+ // 'Suspend! [A]',
+ // 'render start',
+ // 'Img default',
+ // 'Loading...',
+ // ]);
+ // let img = last(images);
+ // loadImage(img);
+ // expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+ // expect(onLoadSpy).not.toHaveBeenCalled();
+
+ // // Flush some of the time
+ // jest.advanceTimersByTime(50);
+ // // Still nothing...
+ // expect(Scheduler).toFlushWithoutYielding();
+
+ // // Flush the promise completely
+ // jest.advanceTimersByTime(50);
+ // // Renders successfully
+ // expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+ // expect(Scheduler).toFlushAndYieldThrough([
+ // 'A',
+ // // img was recreated on unsuspended tree causing new load event
+ // 'render start',
+ // 'Img default',
+ // 'last layout',
+ // ]);
+
+ // expect(images.length).toBe(2);
+ // img = last(images);
+ // expect(img.__needsDispatch).toBe(true);
+ // loadImage(img);
+ // expect(Scheduler).toHaveYielded([
+ // 'actualLoadSpy [default]',
+ // 'onLoadSpy [default]',
+ // ]);
+
+ // expect(Scheduler).toFlushAndYield(['last passive']);
+
+ // expect(onLoadSpy).toHaveBeenCalledTimes(1);
+ // });
it('correctly replays the last img load even when a yield + update causes the host element to change', async function() {
let externalSetSrc = null;