bug: Error when using testing-library/dom getByRole

[angelo-v]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.9.1

Current Behavior

When using testing-library/dom with stencil an error occurs when using getByRole:

Cannot read properties of null (reading 'defaultView')

Expected Behavior

getByRole should find elements with the given role, or say it could not be found, but it should not lead to the above error.

System Info

@testing-library/dom: 9.3.4
@testing-library/jest-dom: 6.2.0

System: node 20.10.0
    Compiler: [...]/node_modules/@stencil/core/compiler/stencil.js
       Build: 1704730339
     Stencil: 4.9.1 🍬
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.26.0

Steps to Reproduce

Component under test:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'test-component',
  shadow: false,
})
export class TestComponent {
  render() {
    return <button>test</button>;
  }
}

test:

import { newSpecPage } from '@stencil/core/testing';
import { screen } from '@testing-library/dom';

import '@testing-library/jest-dom';
import { TestComponent } from './test-component';

describe('test component', () => {
  it('can find button using getByRole', async () => {
    await newSpecPage({
      components: [TestComponent],
      html: `<test-component/>`,
    });
    const button = screen.getByRole('button');
    expect(button).toEqualHtml('<button>test</button>');
  });
});

Code Reproduction URL

https://github.com/angelo-v/stencil-testing-library-dom-error/blob/main/src/components/my-component/my-component.spec.ts

Additional Information

It works when setting the hidden option:

screen.getByRole('button', {hidden: true});

[rwaskiewicz]

Thanks @angelo-v!

I was able to confirm this is a bug with how Stencil represents the relationship between Nodes and their owning Document. I'm going to tag to this to get it ingested into our backlog - thanks again!

[tanner-reits]

A fix for this was included in today's v4.12.2 release!

[angelo-v]

getByRole now seems to work, thank you!

But I am getting follow up errors with toBeInTheDocument matcher:

const list = await getByRole(page.root, 'list');
expect(list).toBeInTheDocument();

Right-hand side of 'instanceof' is not an object

Should I open a seperate issue for this?

[christian-bromann]

Should I open a seperate issue for this?

Yes please! Can you also provide a minimal reproducible example again? Thank you!