Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 #4686

isqua · 2024-10-31T23:07:30Z

Updated @testing-library/react from 13.3.0 to 16.0.1. Only the tests are affected, there is no need to release a new version.

#4685

codesandbox · 2024-10-31T23:07:33Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

codesandbox-ci · 2024-10-31T23:09:49Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 23a1c3f:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

netlify · 2024-10-31T23:09:49Z

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	`23a1c3f`
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/6748ef3cf14ca50008536492
😎 Deploy Preview	https://deploy-preview-4686--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

EskiMojo14 · 2024-10-31T23:15:07Z

The deprecated import is from react-dom/test-utils, which we're not importing from.
Importing from React Testing Library is fine, because they already handle the deprecation.

isqua · 2024-10-31T23:21:26Z

Ah, thanks for your answer. Probably too old testing-library version is currently used because I see such deprecation warnings:

I’ll try to update it later

isqua · 2024-11-01T22:09:05Z

packages/toolkit/package.json

-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",


Updated @testing-library/react to the latest version.
Changelogs for major updates: v14.0.0, v15.0.0, v16.0.0.

Since the version v16.0.0, @testing-library/dom was moved to a peer dependency, so we need to explicitly install it.

Updated @testing-library/user-event to the latest version. Major changes: v14.0.0

isqua · 2024-11-01T22:17:05Z

packages/toolkit/src/query/tests/buildHooks.test.tsx

-      userEvent.hover(screen.getByTestId('highPriority'))
+      await userEvent.hover(screen.getByTestId('highPriority'))


Since Release v14.0.0 · testing-library/user-event userEvent.hover returns a promise, so we need to await here.

isqua · 2024-11-01T22:22:08Z

packages/toolkit/src/query/tests/buildHooks.test.tsx

-    await waitMs(150)
+    await waitForFakeTimer(10)


After upgrading dependencies, all the tests for usePrefetch started to fail. In the master branch, events occur in the following order:

userEvent.hover

timer in baseQuery starts

render User (isFetching true)

userEvent.hover finishes

timer in baseQuery finishes

render User (isFetching false)

And after updating the packages, the events began to happen in the following order:

userEvent.hover

timer in baseQuery starts

render User (isFetching true)

timer in baseQuery finishes

render User (isFetching false)

userEvent.hover finishes

As I noticed, waitMs waits synchronously (while loop), and then resolve the promise in a next tick. So as I understand, after updating libraries, we wait for task queue to be empty after rendering.

So I replaced waitMs with waitForFakeTimer, and tests for usePrefetch was fixed.

However, other tests that relied on the waitMs implementation, failed. So I replaced waitMs with waitForFakeTimer there too.

isqua · 2024-11-01T22:32:24Z

examples/query/react/basic/package.json

-    "@testing-library/react": "^13.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",


Honestly, I didn’t get how to run tests in examples, and how to check if everything is OK.

When I run yarn test in the master branch, the tests run only for the following packages:

@reduxjs/rtk-codemods

@rtk-query/codegen-openapi

@rtk-query/graphql-request-base-query

@reduxjs/toolkit

And when I go to examples/query/react/basic and run npm test there, I get the following error:

> @examples-query-react/[email protected] test > react-scripts test --runInBand TypeError: Cannot read properties of undefined (reading 'EXTENSION') at Runtime.createHasteMap (rtk/node_modules/jest-runtime/build/index.js:547:43) at rtk/node_modules/@jest/core/build/cli/index.js:231:55 at Array.map (<anonymous>) at buildContextsAndHasteMaps (rtk/node_modules/@jest/core/build/cli/index.js:228:13) at _run10000 (rtk/node_modules/@jest/core/build/cli/index.js:305:47) at runCLI (rtk/node_modules/@jest/core/build/cli/index.js:173:9) at async Object.run (rtk/node_modules/jest-cli/build/cli/index.js:155:37) npm error Lifecycle script `test` failed with error: npm error code 1 npm error path rtk/examples/query/react/basic npm error workspace @examples-query-react/[email protected] npm error location rtk/examples/query/react/basic npm error command failed npm error command sh -c react-scripts test --runInBand

That should be fixed by #4603.

Should I correct something in this regard in the current pull request? Do you wanna merge #4603 first?

isqua · 2024-11-23T22:40:06Z

I rebased the branch from the master. Before the rebase there was a failed CI Job Test against dist (20.x) with following tests failed for src/query/tests/buildHooks.test.tsx > hooks tests > usePrefetch

usePrefetch respects force arg
usePrefetch respects ifOlderThan when it evaluates to true
usePrefetch executes a query even if conditions fail when the cache is empty

isqua · 2024-11-23T22:53:24Z

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -774,7 +775,7 @@ describe('hooks tests', () => {
        resPromise = refetch()
      })
      expect(resPromise).toBeInstanceOf(Promise)
-      const res = await resPromise
+      const res = await act(() => resPromise)


Fixed this warning:

Warning: An update to TestComponent inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at TestComponent (redux-toolkit/node_modules/@testing-library/react/dist/pure.js:307:5) at Provider (redux-toolkit/node_modules/react-redux/dist/react-redux.mjs:1036:3) at Wrapper (redux-toolkit/packages/toolkit/src/tests/utils/helpers.tsx:39:29)

isqua · 2024-11-23T23:37:08Z

Hm, cannot reproduce the failures 🤔 Maybe I'm missing something. What I did:

git clean -xdf
nvm use v20.18.0
yarn install

run this script:

#!/bin/bash

count=0
failures=0

for i in {1..50}
do
    if ! yarn test; then
        ((failures++))
    fi
    ((count++))
done

echo "Executed: $count times"
echo "Failures: $failures"

What I got:

Executed: 50 times
Failures: 0

It’s on macos, but I don’t think it matters

isqua · 2024-11-24T00:06:37Z

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -46,7 +47,7 @@ interface Item {

 const api = createApi({
  baseQuery: async (arg: any) => {
-    await waitMs(150)
+    await waitForFakeTimer(20)


Ok, the timeout was 150ms, and I reduced it to 10 to make tests faster, I experimentally chose this value running tests on my laptop. In the latest push I enlarged it to 20, let’s see if it helped with tests in CI

@markerikson could you start the CI again please? If it fails, I’ll put the 150ms back

Okay I see. Pushed back the value of 150ms 🤞

@markerikson could you please run it again? I hope the problem were in the timing, so I rolled it back to 150ms

Thanks, looks like the check is green now.

isqua · 2024-11-24T00:08:44Z

packages/toolkit/src/query/tests/refetchingBehaviors.test.tsx

-    act(() => {
-      fireEvent.focus(window)
-    })
+    fireEvent.focus(window)


fireEvent is already wrapped in the act function: Common mistakes with React Testing Library

markerikson · 2024-11-28T22:38:53Z

Okay, this is green, and I've cleaned up the last couple stray console messages / errors that were getting logged (which already existed prior to this PR). Thank you for working on this!

isqua force-pushed the act branch from ce78c90 to 95b7439 Compare November 1, 2024 21:49

isqua changed the title ~~Import act from react instead of @testing-library/react; Fixes #4685~~ Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 Nov 1, 2024

isqua force-pushed the act branch from 95b7439 to fe43800 Compare November 1, 2024 22:12

isqua commented Nov 1, 2024

View reviewed changes

isqua force-pushed the act branch from fe43800 to b49816e Compare November 23, 2024 22:24

isqua force-pushed the act branch from b49816e to 28a0d8c Compare November 23, 2024 22:51

isqua commented Nov 23, 2024

View reviewed changes

isqua force-pushed the act branch from 28a0d8c to 6dd69f5 Compare November 24, 2024 00:04

isqua commented Nov 24, 2024

View reviewed changes

isqua force-pushed the act branch from 6dd69f5 to 9f4a7c4 Compare November 25, 2024 18:15

isqua and others added 5 commits November 28, 2024 16:29

Upgrade @testing-library/react from 13.3.0 to 16.0.1

a531f50

Fix tests after upgrade @testing-library/react

97f96ad

Remove stray console log

5255770

Fix "unhandled request" warning

f861244

Silence "unhandled error" in ApiProvider error test

0536468

markerikson force-pushed the act branch from 9f4a7c4 to 0536468 Compare November 28, 2024 21:59

markerikson added 2 commits November 28, 2024 17:09

Tweak delay time

ef84607

Harden optimisticUpserts test

23a1c3f

markerikson merged commit e848a55 into reduxjs:master Nov 28, 2024
40 checks passed

isqua deleted the act branch November 29, 2024 09:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 #4686

Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 #4686

isqua commented Oct 31, 2024 •

edited

Loading

codesandbox bot commented Oct 31, 2024

codesandbox-ci bot commented Oct 31, 2024 •

edited

Loading

netlify bot commented Oct 31, 2024 •

edited

Loading

EskiMojo14 commented Oct 31, 2024

isqua commented Oct 31, 2024 •

edited

Loading

isqua Nov 1, 2024

isqua Nov 1, 2024

isqua Nov 1, 2024 •

edited

Loading

isqua Nov 1, 2024

aryaemami59 Nov 2, 2024

isqua Nov 2, 2024 •

edited

Loading

isqua commented Nov 23, 2024 •

edited

Loading

isqua Nov 23, 2024

isqua commented Nov 23, 2024

isqua Nov 24, 2024

isqua Nov 25, 2024

isqua Nov 25, 2024 •

edited

Loading

isqua Nov 26, 2024

isqua Nov 26, 2024

isqua Nov 24, 2024

markerikson commented Nov 28, 2024

		userEvent.hover(screen.getByTestId('highPriority'))
		await userEvent.hover(screen.getByTestId('highPriority'))

Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 #4686

Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685 #4686

Conversation

isqua commented Oct 31, 2024 • edited Loading

codesandbox bot commented Oct 31, 2024

Review or Edit in CodeSandbox

codesandbox-ci bot commented Oct 31, 2024 • edited Loading

netlify bot commented Oct 31, 2024 • edited Loading

✅ Deploy Preview for redux-starter-kit-docs ready!

EskiMojo14 commented Oct 31, 2024

isqua commented Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

isqua Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

isqua Nov 2, 2024 • edited Loading

Choose a reason for hiding this comment

isqua commented Nov 23, 2024 • edited Loading

Choose a reason for hiding this comment

isqua commented Nov 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

isqua Nov 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

markerikson commented Nov 28, 2024

isqua commented Oct 31, 2024 •

edited

Loading

codesandbox-ci bot commented Oct 31, 2024 •

edited

Loading

netlify bot commented Oct 31, 2024 •

edited

Loading

isqua commented Oct 31, 2024 •

edited

Loading

isqua Nov 1, 2024 •

edited

Loading

isqua Nov 2, 2024 •

edited

Loading

isqua commented Nov 23, 2024 •

edited

Loading

isqua Nov 25, 2024 •

edited

Loading