From 96c95a8caf43a82a7324b8c2e41a2fdf1beadf37 Mon Sep 17 00:00:00 2001 From: Ming Ye Date: Sat, 21 Jan 2023 23:51:22 +0800 Subject: [PATCH 1/8] chore: use default testRunner --- scripts/jest/config.base.js | 2 +- scripts/jest/setupTests.js | 26 +++++++++++--------------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js index 2ac534c41c05..1549d938d6d7 100644 --- a/scripts/jest/config.base.js +++ b/scripts/jest/config.base.js @@ -34,5 +34,5 @@ module.exports = { testEnvironment: 'jsdom', - testRunner: 'jasmine2', + testRunner: 'jest-circus/runner', }; diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js index 425c14fceda0..159e8565a6c4 100644 --- a/scripts/jest/setupTests.js +++ b/scripts/jest/setupTests.js @@ -10,16 +10,11 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) { // require that instead. require('./spec-equivalence-reporter/setupTests.js'); } else { - const env = jasmine.getEnv(); const errorMap = require('../error-codes/codes.json'); - // TODO: Stop using spyOn in all the test since that seem deprecated. - // This is a legacy upgrade path strategy from: - // https://github.com/facebook/jest/blob/v20.0.4/packages/jest-matchers/src/spyMatchers.js#L160 - const isSpy = spy => spy.calls && typeof spy.calls.count === 'function'; - - const spyOn = global.spyOn; - const noop = function () {}; + // By default, jest.spyOn also calls the spied method. + const spyOn = jest.spyOn; + const noop = jest.fn; // Spying on console methods in production builds can mask errors. // This is why we added an explicit spyOnDev() helper. @@ -55,10 +50,10 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) { // global variable. The global lets us detect an infinite loop even if // the actual error object ends up being caught and ignored. An infinite // loop must always fail the test! - env.beforeEach(() => { + beforeEach(() => { global.infiniteLoopError = null; }); - env.afterEach(() => { + afterEach(() => { const error = global.infiniteLoopError; global.infiniteLoopError = null; if (error) { @@ -97,7 +92,10 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) { expectedMatcher, unexpectedConsoleCallStacks ) => { - if (console[methodName] !== mockMethod && !isSpy(console[methodName])) { + if ( + console[methodName] !== mockMethod && + !jest.isMockFunction(console[methodName]) + ) { throw new Error( `Test did not tear down console.${methodName} mock properly.` ); @@ -157,8 +155,8 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) { unexpectedWarnCallStacks.length = 0; }; - env.beforeEach(resetAllUnexpectedConsoleCalls); - env.afterEach(flushAllUnexpectedConsoleCalls); + beforeEach(resetAllUnexpectedConsoleCalls); + afterEach(flushAllUnexpectedConsoleCalls); if (process.env.NODE_ENV === 'production') { // In production, we strip error messages and turn them into codes. @@ -309,6 +307,4 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) { const flags = getTestFlags(); return fn(flags); }; - - require('jasmine-check').install(); } From dd667e07a32cf1cc944f9b47df746fda92c33891 Mon Sep 17 00:00:00 2001 From: Ming Ye Date: Sat, 21 Jan 2023 23:56:12 +0800 Subject: [PATCH 2/8] chore: migrate jasmine to circus --- .../src/__tests__/ReactFlight-test.js | 8 +- .../src/__tests__/TimelineProfiler-test.js | 12 +- .../__tests__/legacy/inspectElement-test.js | 2 +- .../__tests__/InvalidEventListeners-test.js | 2 +- .../src/__tests__/ReactDOMComponent-test.js | 12 +- .../ReactDOMConsoleErrorReporting-test.js | 113 +++++++++--------- .../src/__tests__/ReactDOMFiber-test.js | 9 +- .../ReactDOMFizzShellHydration-test.js | 8 +- .../src/__tests__/ReactDOMInput-test.js | 16 ++- .../src/__tests__/ReactDOMTextarea-test.js | 8 +- .../ReactErrorBoundaries-test.internal.js | 4 +- ...eactLegacyErrorBoundaries-test.internal.js | 8 +- .../__tests__/ReactLegacyRootWarnings-test.js | 8 +- .../src/__tests__/ReactTestUtils-test.js | 4 +- .../src/__tests__/ReactTestUtilsAct-test.js | 16 ++- .../src/__tests__/ReactUpdates-test.js | 2 +- .../ReactDOMServerIntegrationTestUtils.js | 12 +- .../__tests__/DebugTracing-test.internal.js | 6 +- .../src/__tests__/ReactHooks-test.internal.js | 4 +- ...tIncrementalErrorHandling-test.internal.js | 18 +-- .../src/__tests__/ReactIsomorphicAct-test.js | 14 ++- .../src/__tests__/ReactLazy-test.internal.js | 4 +- .../src/__tests__/ReactNewContext-test.js | 12 +- .../src/__tests__/ReactThenable-test.js | 6 +- .../useMutableSource-test.internal.js | 8 +- .../src/__tests__/ReactStrictMode-test.js | 4 + .../src/__tests__/SchedulerProfiling-test.js | 6 +- .../__tests__/describeComponentFrame-test.js | 6 +- 28 files changed, 197 insertions(+), 135 deletions(-) diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index 56d4deb3fb39..d238e0c41baf 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -91,6 +91,10 @@ describe('ReactFlight', () => { }; }); + afterEach(() => { + jest.restoreAllMocks(); + }); + function clientReference(value) { return Object.defineProperties( function () { @@ -240,7 +244,7 @@ describe('ReactFlight', () => { ReactNoop.render(rootModel); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); await load(); expect(console.error).toHaveBeenCalledTimes(1); }); @@ -322,7 +326,7 @@ describe('ReactFlight', () => { ReactNoop.render(rootModel); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); await load(); expect(console.error).toHaveBeenCalledTimes(1); }); diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 107182bb445a..e1338e7ec81d 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -47,6 +47,10 @@ describe('Timeline profiler', () => { store = global.store; }); + afterEach(() => { + jest.restoreAllMocks(); + }); + describe('User Timing API', () => { let clearedMarks; let featureDetectionMarkName = null; @@ -517,7 +521,7 @@ describe('Timeline profiler', () => { clearPendingMarks(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -571,7 +575,7 @@ describe('Timeline profiler', () => { clearPendingMarks(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -1697,7 +1701,7 @@ describe('Timeline profiler', () => { renderRootHelper(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -1766,7 +1770,7 @@ describe('Timeline profiler', () => { renderRootHelper(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js index b89fab7c1e8c..a404fa666132 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js @@ -760,7 +760,7 @@ describe('InspectedElementContext', () => { const rendererID = ((store.getRendererIDForElement(id): any): number); const logSpy = jest.fn(); - spyOn(console, 'log').and.callFake(logSpy); + spyOn(console, 'log').mockImplementation(logSpy); // Should store the whole value (not just the hydrated parts) backendAPI.storeAsGlobal({ diff --git a/packages/react-dom/src/__tests__/InvalidEventListeners-test.js b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js index aeeed4bceb87..c5df3e1196ff 100644 --- a/packages/react-dom/src/__tests__/InvalidEventListeners-test.js +++ b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js @@ -65,7 +65,7 @@ describe('InvalidEventListeners', () => { if (!__DEV__) { expect(console.error).toHaveBeenCalledTimes(1); - expect(console.error.calls.argsFor(0)[0]).toEqual( + expect(console.error.mock.calls[0][0]).toEqual( expect.objectContaining({ detail: expect.objectContaining({ message: diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index b474103f97ad..e0fe178d2fe8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -24,6 +24,10 @@ describe('ReactDOMComponent', () => { ReactTestUtils = require('react-dom/test-utils'); }); + afterEach(() => { + jest.restoreAllMocks(); + }); + describe('updateDOM', () => { it('should handle className', () => { const container = document.createElement('div'); @@ -1239,7 +1243,7 @@ describe('ReactDOMComponent', () => { if (__DEV__) { expect(console.log).toHaveBeenCalledTimes(1); - expect(console.log.calls.argsFor(0)[0]).toContain('onError called'); + expect(console.log.mock.calls[0][0]).toContain('onError called'); } }); @@ -1464,7 +1468,7 @@ describe('ReactDOMComponent', () => { it('should support custom elements which extend native elements', () => { const container = document.createElement('div'); - spyOnDevAndProd(document, 'createElement').and.callThrough(); + spyOnDevAndProd(document, 'createElement'); ReactDOM.render(
, container); expect(document.createElement).toHaveBeenCalledWith('div', { is: 'custom-div', @@ -1496,8 +1500,8 @@ describe('ReactDOMComponent', () => { if (__DEV__) { expect(console.log).toHaveBeenCalledTimes(2); - expect(console.log.calls.argsFor(0)[0]).toContain('onError called'); - expect(console.log.calls.argsFor(1)[0]).toContain('onLoad called'); + expect(console.log.mock.calls[0][0]).toContain('onError called'); + expect(console.log.mock.calls[1][0]).toContain('onLoad called'); } }); diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js index 7e1a06b9de49..03c4f97c4946 100644 --- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js @@ -49,6 +49,7 @@ describe('ReactDOMConsoleErrorReporting', () => { afterEach(() => { document.body.removeChild(container); window.removeEventListener('error', windowOnError); + jest.restoreAllMocks(); }); describe('ReactDOMClient.createRoot', () => { @@ -95,7 +96,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: expect.objectContaining({ @@ -125,7 +126,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: expect.objectContaining({ @@ -140,14 +141,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -181,7 +182,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: expect.objectContaining({ @@ -212,7 +213,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -224,14 +225,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -267,7 +268,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: expect.objectContaining({ @@ -298,7 +299,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -310,14 +311,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -347,7 +348,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: expect.objectContaining({ @@ -368,7 +369,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -380,14 +381,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -419,7 +420,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: expect.objectContaining({ @@ -440,7 +441,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -452,14 +453,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -489,7 +490,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: expect.objectContaining({ @@ -510,7 +511,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -522,14 +523,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -561,7 +562,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: expect.objectContaining({ @@ -582,7 +583,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -594,14 +595,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); }); @@ -649,7 +650,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported because we're in a browser click event: @@ -680,7 +681,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: expect.objectContaining({ @@ -695,14 +696,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -730,7 +731,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: @@ -752,7 +753,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -764,14 +765,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -802,7 +803,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: @@ -824,7 +825,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -836,14 +837,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -874,7 +875,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: @@ -896,7 +897,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -908,14 +909,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -949,7 +950,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: @@ -971,7 +972,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -983,14 +984,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -1021,7 +1022,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: @@ -1043,7 +1044,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -1055,14 +1056,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -1096,7 +1097,7 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: @@ -1118,7 +1119,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -1130,14 +1131,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js index b342cc946152..865337e8b547 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js @@ -24,6 +24,7 @@ describe('ReactDOMFiber', () => { afterEach(() => { document.body.removeChild(container); container = null; + jest.restoreAllMocks(); }); it('should render strings as children', () => { @@ -1154,11 +1155,11 @@ describe('ReactDOMFiber', () => { expect(ops).toEqual(['A']); if (__DEV__) { - expect(console.error.calls.count()).toBe(2); - expect(console.error.calls.argsFor(0)[0]).toMatch( + expect(console.error).toHaveBeenCalledTimes(2); + expect(console.error.mock.calls[0][0]).toMatch( 'ReactDOM.render is no longer supported in React 18', ); - expect(console.error.calls.argsFor(1)[0]).toMatch( + expect(console.error.mock.calls[1][0]).toMatch( 'ReactDOM.render is no longer supported in React 18', ); } @@ -1257,7 +1258,7 @@ describe('ReactDOMFiber', () => { let actualDocument; let textNode; - spyOnDevAndProd(iframeContainer, 'appendChild').and.callFake(node => { + spyOnDevAndProd(iframeContainer, 'appendChild').mockImplementation(node => { actualDocument = node.ownerDocument; textNode = node; }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js index 6d770d571b83..a6580d58d9eb 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js @@ -63,6 +63,10 @@ describe('ReactDOMFizzShellHydration', () => { }); }); + afterEach(() => { + jest.restoreAllMocks(); + }); + async function serverAct(callback) { await callback(); // Await one turn around the event loop. @@ -286,7 +290,7 @@ describe('ReactDOMFizzShellHydration', () => { }); test('TODO: A large component stack causes SSR to stack overflow', async () => { - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); function NestedComponent({depth}: {depth: number}) { if (depth <= 0) { @@ -302,7 +306,7 @@ describe('ReactDOMFizzShellHydration', () => { ); }); expect(console.error).toHaveBeenCalledTimes(1); - expect(console.error.calls.argsFor(0)[0].toString()).toBe( + expect(console.error.mock.calls[0][0].toString()).toBe( 'RangeError: Maximum call stack size exceeded', ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js index d75c4ded9e45..7fe9bb1728de 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js @@ -48,6 +48,7 @@ describe('ReactDOMInput', () => { afterEach(() => { document.body.removeChild(container); + jest.restoreAllMocks(); }); it('should warn for controlled value of 0 with missing onChange', () => { @@ -1670,7 +1671,9 @@ describe('ReactDOMInput', () => { it('sets type, step, min, max before value always', () => { const log = []; const originalCreateElement = document.createElement; - spyOnDevAndProd(document, 'createElement').and.callFake(function (type) { + spyOnDevAndProd(document, 'createElement').mockImplementation(function ( + type, + ) { const el = originalCreateElement.apply(this, arguments); let value = ''; @@ -1684,7 +1687,7 @@ describe('ReactDOMInput', () => { log.push('set property value'); }, }); - spyOnDevAndProd(el, 'setAttribute').and.callFake(function (name) { + spyOnDevAndProd(el, 'setAttribute').mockImplementation(function (name) { log.push('set attribute ' + name); }); } @@ -1743,7 +1746,9 @@ describe('ReactDOMInput', () => { const log = []; const originalCreateElement = document.createElement; - spyOnDevAndProd(document, 'createElement').and.callFake(function (type) { + spyOnDevAndProd(document, 'createElement').mockImplementation(function ( + type, + ) { const el = originalCreateElement.apply(this, arguments); const getDefaultValue = Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, @@ -1780,7 +1785,10 @@ describe('ReactDOMInput', () => { setValue.call(this, val); }, }); - spyOnDevAndProd(el, 'setAttribute').and.callFake(function (name, val) { + spyOnDevAndProd(el, 'setAttribute').mockImplementation(function ( + name, + val, + ) { log.push(`node.setAttribute(${strify(name)}, ${strify(val)})`); }); } diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js index 7dcb70699380..c926224afbc0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js @@ -42,6 +42,10 @@ describe('ReactDOMTextarea', () => { }; }); + afterEach(() => { + jest.restoreAllMocks(); + }); + it('should allow setting `defaultValue`', () => { const container = document.createElement('div'); const node = renderTextarea(