From 1214b302e11b06f5fd11f2af20c20b2f26386827 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 8 Apr 2021 17:18:13 +0200 Subject: [PATCH] test: Fix "couldn't locate all inline snapshots" (#21205) --- .../src/__tests__/inspectedElement-test.js | 125 +++++------------- .../__tests__/legacy/inspectElement-test.js | 39 ++---- .../src/__tests__/ownersListContext-test.js | 15 +-- .../src/__tests__/profilerContext-test.js | 24 +--- .../src/__tests__/profilingCache-test.js | 4 +- .../profilingCommitTreeBuilder-test.js | 16 +-- .../src/__tests__/store-test.js | 20 +-- .../src/__tests__/ReactTestRenderer-test.js | 8 +- 8 files changed, 68 insertions(+), 183 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js index 193f4670d3781..60119df3a972b 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js @@ -136,7 +136,7 @@ describe('InspectedElement', () => { return inspectedElement; } - it('should inspect the currently selected element', async done => { + it('should inspect the currently selected element', async () => { const Example = () => { const [count] = React.useState(1); return count; @@ -170,11 +170,9 @@ describe('InspectedElement', () => { "state": null, } `); - - done(); }); - it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async done => { + it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async () => { const contextData = { bool: true, }; @@ -270,10 +268,9 @@ describe('InspectedElement', () => { expect(inspectedElement.context).not.toBe(null); expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext); } - done(); }); - it('should poll for updates for the currently selected element', async done => { + it('should poll for updates for the currently selected element', async () => { const Example = () => null; const container = document.createElement('div'); @@ -312,11 +309,9 @@ describe('InspectedElement', () => { "b": "def", } `); - - done(); }); - it('should not re-render a function with hooks if it did not update since it was last inspected', async done => { + it('should not re-render a function with hooks if it did not update since it was last inspected', async () => { let targetRenderCount = 0; const Wrapper = ({children}) => children; @@ -377,11 +372,9 @@ describe('InspectedElement', () => { "b": "def", } `); - - done(); }); - it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => { + it('should temporarily disable console logging when re-running a component to inspect its hooks', async () => { let targetRenderCount = 0; jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -422,11 +415,9 @@ describe('InspectedElement', () => { expect(console.info).toHaveBeenCalledTimes(1); expect(console.log).toHaveBeenCalledTimes(1); expect(console.warn).toHaveBeenCalledTimes(1); - - done(); }); - it('should support simple data types', async done => { + it('should support simple data types', async () => { const Example = () => null; const container = document.createElement('div'); @@ -463,11 +454,9 @@ describe('InspectedElement', () => { expect(props.nan).toBeNaN(); expect(props.value_null).toBeNull(); expect(props.value_undefined).toBeUndefined(); - - done(); }); - it('should support complex data types', async done => { + it('should support complex data types', async () => { const Immutable = require('immutable'); const Example = () => null; @@ -719,11 +708,9 @@ describe('InspectedElement', () => { expect(typed_array[2]).toBe(0); expect(typed_array[meta.preview_long]).toBe('Int8Array(3) [100, -100, 0]'); expect(typed_array[meta.preview_short]).toBe('Int8Array(3)'); - - done(); }); - it('should not consume iterables while inspecting', async done => { + it('should not consume iterables while inspecting', async () => { const Example = () => null; function* generator() { @@ -745,11 +732,9 @@ describe('InspectedElement', () => { expect(prop[meta.type]).toBe('opaque_iterator'); expect(prop[meta.preview_long]).toBe('Generator'); expect(prop[meta.preview_short]).toBe('Generator'); - - done(); }); - it('should support objects with no prototype', async done => { + it('should support objects with no prototype', async () => { const Example = () => null; const object = Object.create(null); @@ -772,11 +757,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should support objects with overridden hasOwnProperty', async done => { + it('should support objects with overridden hasOwnProperty', async () => { const Example = () => null; const object = { @@ -795,11 +778,9 @@ describe('InspectedElement', () => { // Our snapshot serializer relies on hasOwnProperty() for feature detection. expect(inspectedElement.props.object.name).toBe('blah'); expect(inspectedElement.props.object.hasOwnProperty).toBe(true); - - done(); }); - it('should support custom objects with enumerable properties and getters', async done => { + it('should support custom objects with enumerable properties and getters', async () => { class CustomData { _number = 42; get number() { @@ -833,11 +814,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should support objects with with inherited keys', async done => { + it('should support objects with with inherited keys', async () => { const Example = () => null; const base = Object.create(Object.prototype, { @@ -917,11 +896,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should allow component prop value and value`s prototype has same name params.', async done => { + it('should allow component prop value and value`s prototype has same name params.', async () => { const testData = Object.create( { a: undefined, @@ -973,11 +950,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should not dehydrate nested values until explicitly requested', async done => { + it('should not dehydrate nested values until explicitly requested', async () => { const Example = () => { const [state] = React.useState({ foo: { @@ -1140,11 +1115,9 @@ describe('InspectedElement', () => { }, ] `); - - done(); }); - it('should dehydrate complex nested values when requested', async done => { + it('should dehydrate complex nested values when requested', async () => { const Example = () => null; const container = document.createElement('div'); @@ -1208,11 +1181,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should include updates for nested values that were previously hydrated', async done => { + it('should include updates for nested values that were previously hydrated', async () => { const Example = () => null; const container = document.createElement('div'); @@ -1373,11 +1344,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should return a full update if a path is inspected for an object that has other pending changes', async done => { + it('should return a full update if a path is inspected for an object that has other pending changes', async () => { const Example = () => null; const container = document.createElement('div'); @@ -1510,11 +1479,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should not tear if hydration is requested after an update', async done => { + it('should not tear if hydration is requested after an update', async () => { const Example = () => null; const container = document.createElement('div'); @@ -1598,11 +1565,9 @@ describe('InspectedElement', () => { }, } `); - - done(); }); - it('should inspect hooks for components that only use context', async done => { + it('should inspect hooks for components that only use context', async () => { const Context = React.createContext(true); const Example = () => { const value = React.useContext(Context); @@ -1637,11 +1602,9 @@ describe('InspectedElement', () => { "state": null, } `); - - done(); }); - it('should enable inspected values to be stored as global variables', async done => { + it('should enable inspected values to be stored as global variables', async () => { const Example = () => null; const nestedObject = { @@ -1698,11 +1661,9 @@ describe('InspectedElement', () => { jest.runOnlyPendingTimers(); expect(console.log).toHaveBeenCalledWith('$reactTemp1'); expect(global.$reactTemp1).toBe(nestedObject.a.b); - - done(); }); - it('should enable inspected values to be copied to the clipboard', async done => { + it('should enable inspected values to be copied to the clipboard', async () => { const Example = () => null; const nestedObject = { @@ -1761,11 +1722,9 @@ describe('InspectedElement', () => { expect(global.mockClipboardCopy).toHaveBeenCalledWith( JSON.stringify(nestedObject.a.b), ); - - done(); }); - it('should enable complex values to be copied to the clipboard', async done => { + it('should enable complex values to be copied to the clipboard', async () => { const Immutable = require('immutable'); const Example = () => null; @@ -1856,11 +1815,9 @@ describe('InspectedElement', () => { expect(global.mockClipboardCopy).toHaveBeenCalledWith( JSON.stringify({0: 100, 1: -100, 2: 0}), ); - - done(); }); - it('should display complex values of useDebugValue', async done => { + it('should display complex values of useDebugValue', async () => { const container = document.createElement('div'); function useDebuggableHook() { @@ -1899,12 +1856,10 @@ describe('InspectedElement', () => { }, ] `); - - done(); }); describe('$r', () => { - it('should support function components', async done => { + it('should support function components', async () => { const Example = () => { const [count] = React.useState(1); return count; @@ -1935,11 +1890,9 @@ describe('InspectedElement', () => { "type": [Function], } `); - - done(); }); - it('should support memoized function components', async done => { + it('should support memoized function components', async () => { const Example = React.memo(function Example(props) { const [count] = React.useState(1); return count; @@ -1970,11 +1923,9 @@ describe('InspectedElement', () => { "type": [Function], } `); - - done(); }); - it('should support forward refs', async done => { + it('should support forward refs', async () => { const Example = React.forwardRef(function Example(props, ref) { const [count] = React.useState(1); return count; @@ -2005,11 +1956,9 @@ describe('InspectedElement', () => { "type": [Function], } `); - - done(); }); - it('should support class components', async done => { + it('should support class components', async () => { class Example extends React.Component { state = { count: 0, @@ -2027,18 +1976,16 @@ describe('InspectedElement', () => { await inspectElementAtIndex(0); expect(global.$r.props).toMatchInlineSnapshot(` - Object { - "a": 1, - "b": "abc", - } - `); + Object { + "a": 1, + "b": "abc", + } + `); expect(global.$r.state).toMatchInlineSnapshot(` - Object { - "count": 0, - } - `); - - done(); + Object { + "count": 0, + } + `); }); }); 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 5718c782a9aee..b01d9c0fe9c5a 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js @@ -62,7 +62,7 @@ describe('InspectedElementContext', () => { ReactDOM = require('react-dom'); }); - it('should inspect the currently selected element', async done => { + it('should inspect the currently selected element', async () => { const Example = () => null; act(() => @@ -86,11 +86,9 @@ describe('InspectedElementContext', () => { "state": null, } `); - - done(); }); - it('should support simple data types', async done => { + it('should support simple data types', async () => { const Example = () => null; act(() => @@ -138,11 +136,9 @@ describe('InspectedElementContext', () => { "state": null, } `); - - done(); }); - it('should support complex data types', async done => { + it('should support complex data types', async () => { const Immutable = require('immutable'); const Example = () => null; @@ -338,11 +334,9 @@ describe('InspectedElementContext', () => { expect(typed_array[0]).toBe(100); expect(typed_array[1]).toBe(-100); expect(typed_array[2]).toBe(0); - - done(); }); - it('should support objects with no prototype', async done => { + it('should support objects with no prototype', async () => { const Example = () => null; const object = Object.create(null); @@ -369,11 +363,9 @@ describe('InspectedElementContext', () => { }, } `); - - done(); }); - it('should support objects with overridden hasOwnProperty', async done => { + it('should support objects with overridden hasOwnProperty', async () => { const Example = () => null; const object = { @@ -395,11 +387,9 @@ describe('InspectedElementContext', () => { // Our snapshot serializer relies on hasOwnProperty() for feature detection. expect(inspectedElement.props.object.name).toBe('blah'); expect(inspectedElement.props.object.hasOwnProperty).toBe(true); - - done(); }); - it('should not consume iterables while inspecting', async done => { + it('should not consume iterables while inspecting', async () => { const Example = () => null; function* generator() { @@ -440,11 +430,9 @@ describe('InspectedElementContext', () => { expect(iteratable.next().value).toEqual(1); expect(iteratable.next().value).toEqual(2); expect(iteratable.next().value).toBeUndefined(); - - done(); }); - it('should support custom objects with enumerable properties and getters', async done => { + it('should support custom objects with enumerable properties and getters', async () => { class CustomData { _number = 42; get number() { @@ -490,11 +478,9 @@ describe('InspectedElementContext', () => { "state": null, } `); - - done(); }); - it('should support objects with with inherited keys', async done => { + it('should support objects with with inherited keys', async () => { const Example = () => null; const base = Object.create(Object.prototype, { @@ -583,11 +569,9 @@ describe('InspectedElementContext', () => { "state": null, } `); - - done(); }); - it('should allow component prop value and value`s prototype has same name params.', async done => { + it('should allow component prop value and value`s prototype has same name params.', async () => { const testData = Object.create( { a: undefined, @@ -644,10 +628,9 @@ describe('InspectedElementContext', () => { }, } `); - done(); }); - it('should not dehydrate nested values until explicitly requested', async done => { + it('should not dehydrate nested values until explicitly requested', async () => { const Example = () => null; act(() => @@ -747,8 +730,6 @@ describe('InspectedElementContext', () => { }, } `); - - done(); }); it('should enable inspected values to be stored as global variables', () => { diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js index 4e60bd6a55025..27b75afdd3336 100644 --- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js @@ -60,7 +60,7 @@ describe('OwnersListContext', () => { ); - it('should fetch the owners list for the selected element', async done => { + it('should fetch the owners list for the selected element', async () => { const Grandparent = () => ; const Parent = () => { return ( @@ -115,11 +115,9 @@ describe('OwnersListContext', () => { ), ); expect(didFinish).toBe(true); - - done(); }); - it('should fetch the owners list for the selected element that includes filtered components', async done => { + it('should fetch the owners list for the selected element that includes filtered components', async () => { store.componentFilters = [utils.createDisplayNameFilter('^Parent$')]; const Grandparent = () => ; @@ -163,11 +161,9 @@ describe('OwnersListContext', () => { ), ); expect(didFinish).toBe(true); - - done(); }); - it('should include the current element even if there are no other owners', async done => { + it('should include the current element even if there are no other owners', async () => { store.componentFilters = [utils.createDisplayNameFilter('^Parent$')]; const Grandparent = () => ; @@ -203,11 +199,9 @@ describe('OwnersListContext', () => { ), ); expect(didFinish).toBe(true); - - done(); }); - it('should include all owners for a component wrapped in react memo', async done => { + it('should include all owners for a component wrapped in react memo', async () => { const InnerComponent = (props, ref) =>
; const ForwardRef = React.forwardRef(InnerComponent); const Memo = React.memo(ForwardRef); @@ -243,6 +237,5 @@ describe('OwnersListContext', () => { ), ); expect(didFinish).toBe(true); - done(); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js index a65b65e5b7cf9..21c2b2427b4f4 100644 --- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js @@ -74,7 +74,7 @@ describe('ProfilerContext', () => { ); - it('updates updates profiling support based on the attached roots', async done => { + it('updates updates profiling support based on the attached roots', async () => { const Component = () => null; let context: Context = ((null: any): Context); @@ -105,11 +105,9 @@ describe('ProfilerContext', () => { await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB)); expect(context.supportsProfiling).toBe(false); - - done(); }); - it('should gracefully handle an empty profiling session (with no recorded commits)', async done => { + it('should gracefully handle an empty profiling session (with no recorded commits)', async () => { const Example = () => null; utils.act(() => @@ -144,11 +142,9 @@ describe('ProfilerContext', () => { expect(context.isProcessingData).toBe(false); expect(context.isProfiling).toBe(false); expect(context.profilingData).toBe(null); - - done(); }); - it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => { + it('should auto-select the root ID matching the Components tab selection if it has profiling data', async () => { const Parent = () => ; const Child = () => null; @@ -185,11 +181,9 @@ describe('ProfilerContext', () => { expect(context.rootID).toBe( store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)), ); - - done(); }); - it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => { + it('should not select the root ID matching the Components tab selection if it has no profiling data', async () => { const Parent = () => ; const Child = () => null; @@ -226,11 +220,9 @@ describe('ProfilerContext', () => { expect(context.rootID).toBe( store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number)), ); - - done(); }); - it('should maintain root selection between profiling sessions so long as there is data for that root', async done => { + it('should maintain root selection between profiling sessions so long as there is data for that root', async () => { const Parent = () => ; const Child = () => null; @@ -284,11 +276,9 @@ describe('ProfilerContext', () => { expect(selectedElementID).toBe(otherID); expect(context).not.toBeNull(); expect(context.rootID).toBe(store.getRootIDForElement(id)); - - done(); }); - it('should sync selected element in the Components tab too, provided the element is a match', async done => { + it('should sync selected element in the Components tab too, provided the element is a match', async () => { const GrandParent = ({includeChild}) => ( ); @@ -340,7 +330,5 @@ describe('ProfilerContext', () => { // Select an unmounted element and verify no Components tab selection doesn't change. await utils.actAsync(() => context.selectFiber(childID, 'Child')); expect(selectedElementID).toBe(parentID); - - done(); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js index 476b073843e09..84311c0d87975 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js @@ -478,7 +478,7 @@ describe('ProfilingCache', () => { expect(commitData).not.toBeNull(); }); - it('should calculate self duration correctly for suspended views', async done => { + it('should calculate self duration correctly for suspended views', async () => { let data; const getData = () => { if (data) { @@ -536,8 +536,6 @@ describe('ProfilingCache', () => { } expect(allCommitData).toHaveLength(2); - - done(); }); it('should collect data for each rendered fiber', () => { diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js index 544f4d1614d8d..e597c775d0765 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js @@ -104,7 +104,7 @@ describe('commit tree', () => { LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent)); }); - it('should support Lazy components (legacy render)', async done => { + it('should support Lazy components (legacy render)', async () => { const container = document.createElement('div'); utils.act(() => store.profilerStore.startProfiling()); @@ -145,11 +145,9 @@ describe('commit tree', () => { expect(renderFinished).toBe(true); } - - done(); }); - it('should support Lazy components (createRoot)', async done => { + it('should support Lazy components (createRoot)', async () => { const container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); @@ -185,11 +183,9 @@ describe('commit tree', () => { expect(renderFinished).toBe(true); } - - done(); }); - it('should support Lazy components that are unmounted before resolving (legacy render)', async done => { + it('should support Lazy components that are unmounted before resolving (legacy render)', async () => { const container = document.createElement('div'); utils.act(() => store.profilerStore.startProfiling()); @@ -226,11 +222,9 @@ describe('commit tree', () => { expect(renderFinished).toBe(true); } - - done(); }); - it('should support Lazy components that are unmounted before resolving (createRoot)', async done => { + it('should support Lazy components that are unmounted before resolving (createRoot)', async () => { const container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); @@ -264,8 +258,6 @@ describe('commit tree', () => { expect(renderFinished).toBe(true); } - - done(); }); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 1a283fe120ef3..f971946b686aa 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -853,7 +853,7 @@ describe('Store', () => { expect(store).toMatchSnapshot('1: mount'); }); - it('should show the right display names for special component types', async done => { + it('should show the right display names for special component types', async () => { const MyComponent = (props, ref) => null; const ForwardRefComponent = React.forwardRef(MyComponent); const MyComponent2 = (props, ref) => null; @@ -905,8 +905,6 @@ describe('Store', () => { act(() => ReactDOM.render(, container)); expect(store).toMatchSnapshot(); - - done(); }); describe('Lazy', () => { @@ -933,7 +931,7 @@ describe('Store', () => { LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent)); }); - it('should support Lazy components (legacy render)', async done => { + it('should support Lazy components (legacy render)', async () => { const container = document.createElement('div'); // Render once to start fetching the lazy component @@ -952,11 +950,9 @@ describe('Store', () => { act(() => ReactDOM.render(, container)); expect(store).toMatchSnapshot('3: unmounted'); - - done(); }); - it('should support Lazy components in (createRoot)', async done => { + it('should support Lazy components in (createRoot)', async () => { const container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); @@ -976,11 +972,9 @@ describe('Store', () => { act(() => root.render()); expect(store).toMatchSnapshot('3: unmounted'); - - done(); }); - it('should support Lazy components that are unmounted before they finish loading (legacy render)', async done => { + it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => { const container = document.createElement('div'); // Render once to start fetching the lazy component @@ -992,11 +986,9 @@ describe('Store', () => { act(() => ReactDOM.render(, container)); expect(store).toMatchSnapshot('2: unmounted'); - - done(); }); - it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async done => { + it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => { const container = document.createElement('div'); const root = ReactDOM.unstable_createRoot(container); @@ -1009,8 +1001,6 @@ describe('Store', () => { act(() => root.render()); expect(store).toMatchSnapshot('2: unmounted'); - - done(); }); }); diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js index 6f1536d7de13f..19231b9142876 100644 --- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js +++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js @@ -60,7 +60,7 @@ describe('ReactTestRenderer', () => { }; }); - it('for root Suspense components', async done => { + it('for root Suspense components', async () => { const App = ({text}) => { return ( @@ -82,11 +82,9 @@ describe('ReactTestRenderer', () => { await Promise.resolve(); Scheduler.unstable_flushAll(); expect(root.toJSON()).toEqual('dynamic'); - - done(); }); - it('for nested Suspense components', async done => { + it('for nested Suspense components', async () => { const App = ({text}) => { return (
@@ -110,8 +108,6 @@ describe('ReactTestRenderer', () => { await Promise.resolve(); Scheduler.unstable_flushAll(); expect(root.toJSON().children).toEqual(['dynamic']); - - done(); }); }); });