bug: Error when using testing-library/dom getByRole #5252
Description
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.0System: 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
Additional Information
It works when setting the hidden option:
screen.getByRole('button', {hidden: true});