Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing: Upgrade Jest to v27 #33287

Merged
merged 4 commits into from
Jan 20, 2022
Merged

Testing: Upgrade Jest to v27 #33287

merged 4 commits into from
Jan 20, 2022

Commits on Jan 18, 2022

  1. Testing: Upgrade Jest to v27

    gziolo committed Jan 18, 2022
    Configuration menu
    Copy the full SHA
    573c86e View commit details
    Browse the repository at this point in the history
  2. Fix native test timeouts caused by combining fake timers and setImmed…

    …iate (#37715)
    
    * Upgrade to @testing-library/react-native@8.0.0
    
    * Clean up fake timer usage after tests
    
    This may be unnecessary, but avoid potential issues where fake timers
    are unexpectedly used and cause breakages in other tests.
    
    * Enable combination of modern fake timers and waitFor
    
    Previously, `waitFor` would timeout when `jest.useFakeTimers('modern')`
    was enabled. The 'modern' version is now the default in Jest 27.
    
    The Jest preset from `@testing-library/react-native` provides a
    workaround for a larger issue in React Native and Jest that mutates the
    global `Promise` object. https://git.io/JSDZI
    
    * Remove global enabling of fake timers
    
    Enabling fake timers can have negative consequences with `waitFor`, e.g.
    causing unexpected timeouts. Enabling it globally is far-reaching and
    this should likely be enabled within individual tests as needed.
    
    * Replace jest-jasmine2 with jest-circus
    
    The latter is considered the successor to the former. We seemingly do
    not depend on anything explicitly provided by `jest-jasmine2` and should
    likely move on from it.
    
    * Switch testing environment from jsdom to node
    
    Improves speed of test environment setup and fixes a timeout issue when
    combining `waitFor` and `jest.useFakeTimers('modern')`. It is not yet
    exactly pinpointed as to _why_ this fixes the timeout issue. It appears
    to related to `setImmediate` and `setTimeout`.
    
    * Remove setImmediate global for testing environment
    
    This may be unnecessary if `testEnvironment: 'node'` is retained.
    However, most tests are currently broken due to missing DOM APIs.
    
    * Polyfill required DOM APIs for testing environment
    
    Now that `testEnvironment: 'node'` is utilized for the testing
    environment, we must mirror the app runtime and polyfill the necessary
    DOM APIs used in the source.
    
    The Enzyme configuration removed conflicts with the switch from
    `testEnvironment: 'jsdom'` to `testEnvironment: 'node'`. Enzyme depends
    upon `react-dom`, which introduces far more dependencies upon DOM APIs.
    Currently, all Enzyme-related tests fail and need to be replaced with
    `@testing-library/react-native`.
    
    * Avoid import of react-dom within native file
    
    Importing `react-dom` introduces additional dependencies upon the DOM
    API and is incompatible with `testEnvironment: 'node'`. The `act`
    utility is available from `@testing-library/react-native`.
    
    * Explicitly toggle fake timers in tests
    
    This may not be necessary, but may help avoid unexpected issues from
    lingering fake timers, e.g. timeout errors while using `waitFor`.
    
    * Reinstate legacy Jest timers
    
    The Jest preset from `@testing-library/react-native` that fixed support
    for "modern" timers by modifying the polyfilled the global `Promise`
    resulted in new failures from within React Native itself. Specifically,
    core React Native components rely upon `.done` from the `promise`
    package. `.done` is a non-standard method that does not exist on the
    global `Promise` used by `@testing-library/react-native`'s preset.
    
    * Disable erroneously failing test
    
    This previously passing test now fails after upgrading
    `@testing-library/react-native` due to changes in the library. Setting
    `pointerEvent` to "box-none" or "none" currently erroneously prevents
    triggering other events unrelated to pressing on the element, e.g.
    `onTouch*`, `onLayout`.
    
    https://git.io/JSHZt
    
    * Reinstate jest-jasmine2 to support done callback
    
    The Jest team create jest-circus as the predecessor for jest-jasmine2.
    The former does not support the `done` callback with async/await, and
    would appear to have no plans to do so.
    
    It would likely benefit us to refactor the one current test using
    `done` away from it, and embrace `jest-circus` to maintain alignment
    with Jest core.
    
    * Refactor native unit tests away from done callback
    
    The Jest team created `jest-circus` as the predecessor for
    `jest-jasmine2`. The former does not support the `done` callback with
    async/await, and would appear to have no plans to do so.
    
    In order to embrace `jest-circus` and maintain alignment with Jest core,
    the one test using `done` was refactored to avoid it
    
    - https://git.io/JSHWU
    - https://git.io/JSHWk
    
    * Remove Enzyme from Editor tests
    
    * Remove Enzyme from Paragraph tests
    
    * Remove Enzyme from BlockMover tests
    
    * Remove Enzyme from BlockEdit test
    
    * Remove Enzyme from LinksUI test
    
    * Remove Enzyme from ListEdit tests
    
    * Remove Enzyme from Platform tests
    
    * Remove Enzyme from BlockTypesTab tests
    
    * Remove Enzyme from HTMLTextInput tests
    
    * Remove Enzyme from ReusableBlockTab tests
    
    * Remove Enzyme from MediaUpload tests
    
    * Remove Enzyme from BlockMediaUpdateProgress tests
    
    * Remove Enzyme from MediaUploadProgress tests
    
    * Fix ReferencEerror in Inserter test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Fix ReferencEerror in Verse test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Fix ReferencEerror in Audio test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Fix ReferencEerror in File test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Fix ReferencEerror in Search test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Fix ReferencEerror in Missing test
    
    Usage of `react-test-renderer` caused the following error. Leveraging
    `@testing-library/react-native` instead resolved it for an unknown
    reason.
    
    ```
    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From packages/block-editor/src/components/inserter/test/index.native.js.
    
          468 |                     style: listStyle,
          469 |                     safeAreaBottomInset,
        > 470 |                     scrollEnabled,
              |                                             ^
          471 |                     automaticallyAdjustContentInsets: false,
          472 |             };
          473 |
    
          at Object.get PanResponder [as PanResponder] (node_modules/react-native/index.js:251:12)
          at BottomSheet.render (packages/components/src/mobile/bottom-sheet/index.native.js:470:39)
          at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
          at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
          at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
    ```
    
    * Upgrade to @testing-library/react-native@9.0.0
    
    * Add assertions to block type tab tests
    
    Improve test clarity with explicit expect assertions.
    
    Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
    
    * Remove unnecessary abstraction
    
    The switch away from Enzyme reduced this abstraction to a single line,
    so it provides less value now.
    
    * Consistently assert media block update progress spinner removal
    
    This increases consistency amongst the tests, as most already include
    this assertion.
    
    * Update MediaUpload test to select 'Choose from device' option
    
    This selection better aligns with the test description.
    
    * Remove duplicative matchMedia global definition
    
    The test environment now imports the globals setup file used by the app
    runtime. That file includes a `matchMedia` global definition as well.
    
    * Add assertions to LinkSettings tests
    
    Improve test clarity with explicit expect assertions.
    
    * Removed shallow renderer usage in tests
    
    Shallow rendering components is generally considered a non-optimal
    approach to testing React components by the React community. This
    replaces `shallow` with `render` to further test integration of the
    subject components.
    
    * Remove unused import
    
    The `React` import was utilized by the now removed `shallow` render
    implementation.
    
    * Remove unnecessary top-level beforeAll usage
    
    Jest runs each test file independently, so top-level code will not
    impact other test files. Since the `(before|after)All` usage in code
    changed is all top-level, and not within a `describe`, it is
    superfluous.
    
    Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
    2 people authored and gziolo committed Jan 18, 2022
    Configuration menu
    Copy the full SHA
    44084d9 View commit details
    Browse the repository at this point in the history
  3. Fix erroneous react-dom usage in native tests (#37921)

    * Reinstate react-platform.native.js file
    
    This file was removed in the following commit, as it was no longer
    strictly necessary. b7b62d2#diff-f02069349f238fb47a268bb7fcc03c9768331db18ead0e28d8ecad7bbc05037c
    
    However, the removal led to Jest loading the DOM-specific version of the
    file when mocking Gutenberg modules that depended upon
    `react-platform.js`. Jest would seemingly load `react-dom` when
    attempting to auto-mock a module, e.g. `jest.mock( '@wordpress/data/src/components/use-select' );`.
    
    The loading of `react-dom` resulted in the following error:
    
    ```
    TypeError: Cannot use 'in' operator to search for 'WebkitAnimation' in undefined
    
      at getVendorPrefixedEventName (node_modules/react-dom/cjs/react-dom.development.js:5011:58)
      at node_modules/react-dom/cjs/react-dom.development.js:5019:21
      at Object.<anonymous> (node_modules/react-dom/cjs/react-dom.development.js:26261:5)
      at Object.<anonymous> (node_modules/react-dom/index.js:37:20)
    ```
    
    Reinstating `react-platform.native.js` addresses this issue by ensuring
    that Jest does not encounter an import of `react-dom`.
    
    * Fix false-positive ReactNativeEditor test
    
    This test failed when run in isolation. It would appear it was dependent
    upon the `jest.mock('../setup')` found in sibling tests.
    
    After defining a mock for this specific test, it was discovered that the
    assertion did not await the asynchronous query found within the test.
    The assertion resulted in a false-positive as the returned query
    `Promise` technically matches `toBeDefined`. `async`/`await` was added
    to ensure the test assertion awaits the query result, as well as fixes
    the following related log warning.
    
    ```
    A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
    ```
    dcalhoun authored and gziolo committed Jan 18, 2022
    Configuration menu
    Copy the full SHA
    eda1414 View commit details
    Browse the repository at this point in the history

Commits on Jan 19, 2022

  1. [RNMobile] Fix act warnings that might be triggered after test fini…

    …shes (#38052)
    
    * Fix act warnings after test finishes
    
    This is a workaround for addressing the act warnings that might caused by store updates executed after the test finishes.
    
    * Update comment of setImmediate workaround
    
    Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
    
    * Unmount editor when test finish
    
    * Update initialize editor helper
    
    The function is now synchronous as we don't have to wait for any element.
    
    * Update tests that use initialize editor
    
    * Fix act warnings from store resolvers with fake timers (#38077)
    
    * Leverage fake timers to resolve store resolvers
    
    During editor initialization, asynchronous store resolvers rely upon
    `setTimeout` to run at the end of the current JavaScript block
    execution. In order to prevent "act" warnings triggered by updates to
    the React tree, we leverage fake timers to manually tick and await the
    resolution of the current block execution before proceeding.
    
    * Update RichText test `initializeEditor` usage
    
    The refactor of `initializeEditor` to leverage fake timers means this
    test no longer needs to `await` asynchronous work or manuall `unmount`
    its subject component.
    
    * Refactor usage of `initializeEditor` in tests
    
    Now that `initializeEditor` leverages fake timers to resolve
    asynchronous store resolvers, the tests no longer need to await a
    resolution of `initializeEditor`.
    
    * Fix `act` warnings in Image edit test
    
    Retrieving text from the clipboard is an asynchronous action. The
    component updated React state once the clipboard resolved. This resulted
    in a state update triggering an `act` warning. Because there is no
    visible change to the rendered output, e.g. updated text or UI, we must
    await the resolution of the clipboard promise itself.
    
    Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
    fluiddot and dcalhoun authored Jan 19, 2022
    Configuration menu
    Copy the full SHA
    80c8b7e View commit details
    Browse the repository at this point in the history