ExternalHyperlink button causes @testing-library/react getByRole('link') queries to hang with v11 of Canvas Kit

[ahayes91]

🐛 Bug Report

ExternalHyperlink button causes @testing-library/react getByRole('link') queries to hang with v11 of Canvas Kit

To Reproduce

• Pull this StackBlitz: https://stackblitz.com/edit/canvas-kit-react-v11-starter-w7cqqu-9gfiwe?file=src%2FApp.test.tsx
• Use test.only to isolate the 2 different test specs and try them out
• npm i; npm test

The test for reference:

import { render, screen } from '@testing-library/react';
import { describe, test, expect } from 'vitest';
import { ExternalHyperlink } from '@workday/canvas-kit-react/button';

const TestComponent = () => <a href="https://www.google.com">Click me!</a>;
const TestCanvasComponent = () => (
  <ExternalHyperlink href="https://www.google.com">Click me!</ExternalHyperlink>
);

describe('Testing Canvas Kit and @testing-library/react:', () => {
  test('This hangs', async () => {
    render(<TestCanvasComponent />);
    expect(
      await screen.findByRole('link', {
        name: /Click me!/,
      })
    ).toBeDefined();
  });
  test('This passes', async () => {
    render(<TestComponent />);
    expect(
      await screen.findByRole('link', { name: 'Click me!' })
    ).toBeDefined();
  });
});

Expected Behavior

Both tests should pass

Actual Results

Test using Canvas Kit ExternalHyperlink button fails

Link to repl or repo (highly encouraged)

⬆️

Error Output

no error, the test just hangs

[NicholasBoll]

When you say “hangs”, I think it is because you’re using findBy* rather than getBy*. get* queries are instant while find* queries retry until time out.

The ExternalLink has an external link image that has a label of “Opens in new window”. This adds to the label of the external link. For example:

<ExternalHyperlink href="https://google.com">Some Link</ExternalHyperlink>

This has the accessible name computed to:

Some Link Opens in new window

The external icon has this label for accessibility to inform screen reader users that the link opens in a new window. The icon is for visual users to know it opens in a new window.

[NicholasBoll]

If you wish to not include the "Opens link in new window" in your name, you can use a regular expression instead:

    expect(
      await screen.findByRole('link', { name: /Click me!/ })
    ).toBeDefined();

[ahayes91]

I did know about the extra label but I forgot! https://stackblitz.com/edit/canvas-kit-react-v11-starter-w7cqqu-9gfiwe?file=src%2FApp.test.tsx updated but it still never actually times out (from what I can tell!)

[ahayes91]

https://stackblitz.com/edit/canvas-kit-react-v10-starter-pbwauw?file=src%2FApp.test.tsx is a Stackblitz with all the same tests / happy-dom / vitest config, and the tests pass

[ahayes91]

looks like v12 passes 🤯 https://stackblitz.com/edit/canvas-kit-react-v12-starter-w7cqqu-xnx6x3?file=src%2FApp.test.tsx

[ahayes91]

Nicholas spotted that the problem here is actually happy-dom - when we switch to jsdom, CK 11 works fine:

https://stackblitz.com/edit/canvas-kit-react-v11-starter-w7cqqu-5xmrfs?file=src%2FApp.test.tsx,vite.config.ts

I can raise something on the happy-dom repo for traceability (and in case we do really need happy-dom over jsdom in the future, it might crop up again).
Otherwise I've got two paths forward - switch to jsdom, or upgrade straight to CK v12, both of which are pretty reasonable!

Thanks for the investigation ❤️

[ahayes91]

Closing this in favour of capricorn86/happy-dom#1593, workarounds listed above!