Skip to content

fix(render): Default to HTMLElement in returned container #868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 2, 2021
Merged

fix(render): Default to HTMLElement in returned container #868

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d918b3f
fix(render): Default to HTMLElement in returned container
eps1lon Jan 26, 2021
b9836da
Clarify difference between rendered element and container
eps1lon Jan 27, 2021
a61a0d5
Prefer input container in output container type inference
eps1lon Feb 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Clarify difference between rendered element and container
  • Loading branch information
@eps1lon
eps1lon committed Jan 27, 2021
commit b9836da4d4d2c26494f53b3b6cb629799774615b
11 changes: 6 additions & 5 deletions types/test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {render, fireEvent, screen, waitFor} from '.'
import * as pure from './pure'

export async function testRender() {
const page = render(<div />)
const page = render(<button />)

// single queries
page.getByText('foo')
Expand All @@ -22,7 +22,7 @@ export async function testRender() {
}

export async function testPureRender() {
const page = pure.render(<div />)
const page = pure.render(<button />)

// single queries
page.getByText('foo')
Expand All @@ -43,8 +43,9 @@ export async function testPureRender() {
export function testRenderOptions() {
const container = document.createElement('div')
const options = {container}
const {container: returnedContainer} = render(<div />, options)
// Unclear why TypeScript infers `HTMLElement` here when the the input `container` is `HTMLDivElement`
const {container: returnedContainer} = render(<button />, options)
// Unclear why TypeScript infers `HTMLElement` here when the the input `container` is `HTMLDivElement`.
Copy link
Member

@timdeschryver timdeschryver Jan 29, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we'd swap the render methods in the declaration file, this would infer correctly (it uses the first one).
I'm unfamiliar with the types for RTL, so I'm not sure if this would break something, or if we could maybe entirely remove the other render type.

Suggested change
// Unclear why TypeScript infers `HTMLElement` here when the the input `container` is `HTMLDivElement`.
// Unclear why TypeScript infers `HTMLElement` here when the input `container` is `HTMLDivElement`.

Copy link
Member Author

@eps1lon eps1lon Feb 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timdeschryver Awesome, thanks! Fixed in a61a0d5 (#868)

Copy link
Member

@timdeschryver timdeschryver Feb 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm glad I could help 🙂

// It's working for `testSVGRenderOptions`.
// Hopefully this breaks someday and we can switch to
// expectType<HTMLDivElement, typeof returnedContainer>(returnedContainer)
expectType<HTMLElement, typeof returnedContainer>(returnedContainer)
Expand All @@ -56,7 +57,7 @@ export function testSVGRenderOptions() {
'svg',
)
const options = {container}
const {container: returnedContainer} = render(<svg />, options)
const {container: returnedContainer} = render(<path />, options)
expectType<SVGSVGElement, typeof returnedContainer>(returnedContainer)
}

Expand Down