Skip to content

docs(svelte): props can now be passed in directly #335

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.

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 1 commit into from
Dec 6, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 16 additions & 2 deletions docs/svelte-testing-library/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ tells Svelte to apply any new changes to the DOM.

## `render`

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

const { results } = render(
Expand All @@ -41,6 +41,20 @@ These are the options you pass when instantiating your Svelte `Component`.
Please refer to the
[Client-side component API](https://svelte.dev/docs#Client-side_component_API).

📝 If the only option you're passing in is `props`, then you can just pass them
in directly.

```js
// With options.
const { results } = render(YourComponent, {
target: MyTarget,
props: { myProp: 'value' },
})

// Props only.
const { results } = render(YourComponent, { myProp: 'value' })
```

### Render Options

| Option | Description | Default |
Expand Down Expand Up @@ -69,7 +83,7 @@ Unmounts the component from the container and destroys the container.
test. If you'd like to disable this then set `process.env.STL_SKIP_AUTO_CLEANUP`
to true or import `dont-clean-up-after-each` from the library.

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

afterEach(() => {
Expand Down
4 changes: 2 additions & 2 deletions docs/svelte-testing-library/example.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ import { render, fireEvent } from '@testing-library/svelte'
import Comp from '../Comp'

test('shows proper heading when rendered', () => {
const { getByText } = render(Comp, { props: { name: 'World' } })
const { getByText } = render(Comp, { name: 'World' })

expect(getByText('Hello World!')).toBeInTheDocument()
})

// Note: This is as an async test as we are using `fireEvent`
test('changes button text on click', async () => {
const { getByText } = render(Comp, { props: { name: 'World' } })
const { getByText } = render(Comp, { name: 'World' })
const button = getByText('Button')

// Using await when firing events is unique to the svelte testing library because
Expand Down