Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.

[Semigradsky]

• @testing-library/react version: 11.2.2

Relevant code or config:

	const { container } = render( // container is `Element` here
		<MyComponent/>,
	)

	expect(getByText(container, someText)).toBeInTheDocument() // Error: Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.
	expect(getByTestId(container, 'test-id')).toBeInTheDocument() // Error: Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'.

Problem description:

After testing-library/react-testing-library#833 I get type errors because container no more HTMLElement.

container as HTMLElement doesn't seem like a good solution.

[MatanBobi]

Hi @Semigradsky! Thanks for opening this one.
Looks like it's because dom-testing-library types weren't updated accordingly..
Basically, I'd recommend using screen to query the DOM and not container, but this should be solved.
I think that @nickmccurdy started working on something related in #834, lets wait to see what he says and maybe @eps1lon will have an opinion on this one.

[eps1lon]

Isn't that an issue with jest-dom i.e. toBeInTheDocument should allow any Node not just HTMLElement?

[MatanBobi]

Isn't that an issue with jest-dom i.e. toBeInTheDocument should allow any Node not just HTMLElement?

That's a fair point I didn't think of.. looks like jest-dom is checking for HTMLElement or SVGElement
https://github.com/testing-library/jest-dom/blob/8298015b09e886e53116d4977c20924e45d3fcd9/src/utils.js#L54

But it doesn't seem to be the error that @Semigradsky is reporting, jest-dom doesn't have type definitions I think..

[eps1lon]

That's a fair point I didn't think of.. looks like jest-dom is checking for HTMLElement or SVGElement
testing-library/jest-dom@8298015/src/utils.js#L54

Could you check why they do that? From their documentation it sounds like any element should work. I'd even argue they should just allow any Node

But it doesn't seem to be the error that @Semigradsky is reporting, jest-dom doesn't have type definitions I think..

They do: https://github.com/testing-library/react-testing-library/issues/837#issuecomment-733761580 https://www.npmjs.com/package/@types/testing-library__jest-dom

[MatanBobi]

They do: #837 (comment)

This is a runtime type test and not a typescript error (which is what @Semigradsky is reporting I think).

[eps1lon]

They do: #837 (comment)

This is a runtime type test and not a typescript error (which is what @Semigradsky is reporting I think).

What's a "runtime type test"? The error message sounds exactly like errors from TypeScripts's type-checker e.g. https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABFOAhApgSTAFQBboAicEIAtumFABToA26FVAXIgBI4CyAMgKINMoASlYA3ODAAmiAN4BfAFALJ6CHQCGAJ3SIICAM5RE9RpSit+pqgG4FKDNnxES5M7QFmh1oA.

[MatanBobi]

What i meant to say is that the error thrown here
Doesn't look like a static type error (typescript etc) and it's also a runtime error.
In the example you've attached you set a type:
function toBeInTheDocument(element: HTMLElement): void {}
This isn't done in jest-dom or at least I couldn't find that type definition.
I may be missing something here though so I would be glad to learn :)

[gnapse]

I took the liberty to transfer this issue to jest-dom where it belongs. Seems that this needs a fix similar to that in testing-library/jest-dom#307.

[eps1lon]

I read the issue description again and don't understand how this would mean a runtime error. The wording doesn't match the runtime errors, sounds like a type error and matches exactly what TypeScript's type-checker says right now.

[MatanBobi]

I read the issue description again and don't understand how this would mean a runtime error. The wording doesn't match the runtime errors, sounds like a type error and matches exactly what TypeScript's type-checker says right now.

I agree on this one, but jest-dom doesn't have any type definitions as far as I can see so I thought it's related to the types defined in dom-testing-library here:

dom-testing-library/types/queries.d.ts

Line 57 in c6e7a83

container: HTMLElement,

[eps1lon]

but jest-dom doesn't have any type definitions as far as I can see

Argh, I pasted the wrong link previously. They do have definitions: https://www.npmjs.com/package/@types/testing-library__jest-dom

[Semigradsky]

They do have definitions: npmjs.com/package/@types/testing-library__jest-dom

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/testing-library__jest-dom/index.d.ts

[nickmccurdy]

getByText and getByTestId are being re-exported upstream from DOM Testing Library, which hasn't been updated to match React Testing Library yet (you can subscribe to the pull request for updates).

There is also a separate issue with the runtime (not TypeScript) type checking in Jest DOM. I've opened testing-library/jest-dom#313 to track that.