Closed
Description
@testing-library/jest-dom
version: ^5.16.5node
version: 16npm
(oryarn
) version: yarn 2 latest
Relevant code or config:
An example of when this is an issue: (see below for the root cause)
it('should have an accessible name', () => {
const { getByRole } = render(<input type="checkbox" aria-label="label" />);
const inputEl = getByRole('checkbox');
expect(inputEl).toHaveAccessibleName('label'); // ❌ toHaveAccessibleName does not exist (TS and eslint errors)
});
What you did:
I'm asserting that components must have accessible names/descriptions.
What happened:
There's a TypeScript error warning that toHaveAccessibleName
does not exist in the Jest global matchers.
Reproduction:
I don't think it's necessary in this case. Let me know if you'd like it.
Problem description:
The issue is with the @types
dependency that @testing-library/jest-dom
includes:
Line 35 in 948d90f
This is an outdated version (the latest is 5.14.5 from 4 months ago) which doesn't yet declare matchers such as toHaveAccessibleName
.
Suggested solution:
- update the dependency 🙂
- even better (?): include types as part of
@testing-library/jest-dom
. I've seen this suggested in several issues, but haven't dug into what the blockers would be. But including types as part of this package would prevent this kind of issues from happening in the future - (short-term fix for people running into the issue: install the latest version of
@types/testing-library__jest-dom
in your project)