Skip to content

Conversation

ObieMunoz
Copy link
Contributor

The original Testing Library/Svelte docs have not beed updated in quite a while and I believe the actual examples were written prior to screen being released in DOM Testing Library v6.11.0.

Best practice is to use the screen and not access the container directly for queries.

Copy link
Member

@timdeschryver timdeschryver left a comment

Choose a reason for hiding this comment

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

Hi thanks for the PR.
I added some remarks to keep things consistent.
Let me know what you think

```js
import {render, screen} from '@testing-library/svelte'

const exampleInput = screen.getByLabelText('Example')
Copy link
Member

Choose a reason for hiding this comment

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

Should this render the component first?
I would also prefer to revert this change to keep this consistent, or all the examples in the core api should include a svelte example. If you want to, feel free to create a follow-up PR with the changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I reverted this and will follow-up with a future PR to add svelte to all of the examples in the core api.

@@ -30,6 +31,32 @@ import {render} from '@testing-library/svelte'
const {results} = render(YourComponent, {ComponentOptions}, {RenderOptions})
```

## `screen`
Copy link
Member

Choose a reason for hiding this comment

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

To keep the docs consistent we should also revert this change because no other libraries include it in their docs.
screen is not Svelte specific and is already documented in the core api, ideally we don't want to introduce duplicates.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That makes sense, I reverted this.

const {getByText} = render(Comp)
const button = getByText('Count is 0')
render(Comp)
const button = screen.getByText('Count is 0')
Copy link
Member

Choose a reason for hiding this comment

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

screen needs to be imported

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, updated!

@ObieMunoz ObieMunoz requested a review from timdeschryver July 15, 2022 21:24
Copy link
Member

@timdeschryver timdeschryver left a comment

Choose a reason for hiding this comment

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

Thanks @ObieMunoz !

@timdeschryver timdeschryver merged commit b943d38 into testing-library:main Jul 16, 2022
@timdeschryver
Copy link
Member

@all-contributors please add @ObieMunoz for docs

@allcontributors
Copy link
Contributor

@timdeschryver

I've put up a pull request to add @ObieMunoz! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants