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

Lots of new act warnings since 9.3.1 #1251

Closed
jgarplind opened this issue Aug 22, 2023 · 8 comments
Closed

Lots of new act warnings since 9.3.1 #1251

jgarplind opened this issue Aug 22, 2023 · 8 comments

Comments

@jgarplind
Copy link

  • @testing-library/dom version: 9.3.1
  • Testing Framework and version: vitest 0.33/0.34.2
  • DOM Environment: jsdom 22.1.0

Relevant code or config:

  it("should group items", async () => {
    renderWithReactQueryAndReactRouter();

    const user = userEvent.setup();
    await user.selectOptions(
      await screen.findByRole("combobox", { name: "group" }),
      ["property"],
    );
    expect(
      screen.getByRole("columnheader", { name: "John Doe" }),
    ).toBeInTheDocument();
  });

What you did:

Re-installed packages for the first time since @testing-library/[email protected] was released, triggering an upgrade since I use @testing-library/user-event which has a peer dependency: "@testing-library/dom": ">=7.21.4"

This is the different in my pnpm-lock.yaml:

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-Dffe68pGwI6WlLRYR2I0piIkyole9cSBH5jGQKCGMRpHW5RHCqAUaqc2Kv0tUyd4dU4DLPKhJIjyKOnjv4tuUw==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.21.4
      '@babel/runtime': 7.22.3
      '@types/aria-query': 5.0.1
      aria-query: 5.1.3
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.22.10
      '@babel/runtime': 7.22.10
      '@types/aria-query': 5.0.1
      aria-query: 5.1.3
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1

What happened:

New behaviors, including errors and warnings.

In particular, a lot of new act warnings:

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 stacktrace pointing to component

It is really quite pervasive, and could be due to user error, but I am a fairly experience testing library user and have never seen anything like this.

Reproduction:

Seeking to understand if I am being reasonable or barking up the wrong tree before spending time on that, sorry.

Problem description:

Our trust in our tests is significantly reduced since the warnings indicate that they don't operate correctly.

Suggested solution:

Help me understand how 9.3.1, really only pinning aria-query to a slightly older version, could cause all this trouble?

@MatanBobi
Copy link
Member

Hi @jgarplind, thanks for opening this.
Since act is only related to RTL, the issue you're raising isn't relevant to this library.
We do have an issue about this which is related to RTL 14: testing-library/react-testing-library#1216, is that what you're experiencing? If so, I believe we can close this as duplicated and continue the discussion there.

@jgarplind
Copy link
Author

Thanks for getting back so soon.

Right, of course act only exists in the React ecosystem, so I can see why this issue would be better handled over there.

Before closing, I just wanted to mention the error that I have worked around by simplifying the test, but which was also caused by the 9.3.0 -> 9.3.1 upgrade:

AssertionError: expected [ <span …(1)></span>, …(2) ] to have a length of 5 but got 3

- Expected
+ Received

- 5
+ 3

Now, this is just one test, and it is non-trivial (including usage of mswjs.io, zod, etc.), but I was still surprised to see it stop working all out of sudden:

  it("can finish activity", async () => {
    renderScheduleWithReactQueryAndReactRouter();
    const user = userEvent.setup();
    const finishButton = await screen.findByRole("button", {
      name: "xxx",
    });
    const numberOfFinishedBefore = screen.getAllByText("finished").length;
    const numberOfUnfinishedBefore = occurrences.filter(
      ({ status }) =>
        status !== occurrenceState.Values.finished,
    ).length;

    server.use(
      rest.get(`*/occurrences`, (req, res, ctx) => {
        return res(
          ctx.body(
            JSON.stringify(
              occurrences.map((a) => {
                if (a.category === category.Values.Task) {
                  return {
                    ...a,
                    status: occurrenceState.Values.finished,
                  };
                }
                return a;
              }),
            ),
          ),
        );
      }),
    );
    await user.click(finishButton);
    expect(await screen.findAllByText("finished")).toHaveLength(
      numberOfFinishedBefore + numberOfUnfinishedPatientTasksBefore,
    );
  });

I suppose this doesn't change much - the issue is better handled where you linked me to, but now at least I have shared most of the information available to me!

@jgarplind
Copy link
Author

Then again.. I've been on user-event 14.4.3 and react 18 since before, so I'm not sure the issues are the same, but probably related.

@MatanBobi
Copy link
Member

The point is @testing-library/dom 9.3.1 only change was pinning the version of aria-query to a specific version. Is there any way to know what was the previous version of aria-query you were using (probably can be found in the package-lock file if you have one. I don't think those issues are related anyways :)

@jgarplind
Copy link
Author

You can see in my initial post that it was the same (5.1.3) which just causes me even more confusion.

But I can consistently "toggle" the warnings just by flipping between 9.3.0 and 9.3.1.

... and when cross-checking again (after playing around a bit with pnpm hooks and whatnot), I now see a different version for 9.3.0, namely [email protected]:

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-Dffe68pGwI6WlLRYR2I0piIkyole9cSBH5jGQKCGMRpHW5RHCqAUaqc2Kv0tUyd4dU4DLPKhJIjyKOnjv4tuUw==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.22.10
      '@babel/runtime': 7.22.10
      '@types/aria-query': 5.0.1
      aria-query: 5.3.0
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.22.10
      '@babel/runtime': 7.22.10
      '@types/aria-query': 5.0.1
      aria-query: 5.1.3
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1

I'm really stumped, but for now I think I will just enforce 9.3.0 using a pnpm hook*, since I believe (and hope for) these warnings to be misplaced.

*For anyone interested, looks like this:

function readPackage(pkg) {
  // This will change any packages using @testing-library/dom as a peer dependency to use @testing-library/[email protected]
  if (pkg.peerDependencies["@testing-library/dom"]) {
    pkg.peerDependencies["@testing-library/dom"] = "9.3.0";
  }

  return pkg;
}

module.exports = {
  hooks: {
    readPackage,
  },
};

as explained here: https://pnpm.io/pnpmfile#hooksreadpackagepkg-context-pkg--promisepkg

@domos4
Copy link

domos4 commented Sep 4, 2023

I'm experiencing the very same issue. I'm using vitest and all the libraries listed by OP at the same versions.

@jgarplind
Copy link
Author

Just updated to the latest releases of this package as well as user-event, and my workaround is no longer necessary.

Closing.

@jgarplind
Copy link
Author

Turns out the issue is with multiple versions.

It hit us again now with 9.3.3 and 9.3.4.

So indeed the original tip to check testing-library/react-testing-library#1216 was relevant, since that discussion has now turned us there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants