Skip to content

docs(svelte): improve component api description + recommend better transformer #334

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 2 commits into from
Dec 5, 2019
Merged

docs(svelte): improve component api description + recommend better transformer #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3dc3df2
docs(svelte): improve description of component api usage
mihar-22 Dec 5, 2019
12d8c11
docs(svelte): recommend better transformer
mihar-22 Dec 5, 2019
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
16 changes: 8 additions & 8 deletions docs/svelte-testing-library/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,14 @@ Please refer to the

### Results

| Result | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `container` | The HTML element the component is mounted into. |
| `component` | The newly created Svelte component. This is mostly useful for testing exported functions or cases where manipulating the DOM doesn't fit. Outside of said cases avoid using the component directly to build tests, instead of interacting with the rendered Svelte component, work with the DOM . |
| `debug` | Logs the `container` using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom). |
| `unmount` | Unmounts the component from the `target` by calling `component.$destroy()`. |
| `rerender` | Calls render again destroying the old component, and mounting the new component on the original `target` with any new options passed in. |
| `...queries` | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) that are binded to the `container`. If you pass in `query` arguments than this will be those, otherwise all. |
| Result | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `container` | The HTML element the component is mounted into. |
| `component` | The newly created Svelte component. Generally, this should only be used when testing exported functions, or when you're testing developer facing API's. Outside of said cases avoid using the component directly to build tests, instead of interacting with the rendered Svelte component, work with the DOM. Have a read of [Avoid the Test User](https://kentcdodds.com/blog/avoid-the-test-user) by Kent C. Dodds to understand the difference between the **end user** and **developer user**. |
| `debug` | Logs the `container` using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom). |
| `unmount` | Unmounts the component from the `target` by calling `component.$destroy()`. |
| `rerender` | Calls render again destroying the old component, and mounting the new component on the original `target` with any new options passed in. |
| `...queries` | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) that are binded to the `container`. If you pass in `query` arguments than this will be those, otherwise all. |

## `cleanup`

Expand Down
13 changes: 10 additions & 3 deletions docs/svelte-testing-library/setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ with any testing framework and runner you're comfortable with.

3. You'll need to compile the Svelte components before using them in Jest, so
we need to install
[jest-transform-svelte](https://github.com/rspieker/jest-transform-svelte)
[svelte-jester](https://github.com/mihar-22/svelte-jester)

```
npm install --save-dev jest-transform-svelte
npm install --save-dev svelte-jester
```

4. Add the following Jest configuration to your `package.json`
Expand All @@ -40,7 +40,7 @@ with any testing framework and runner you're comfortable with.
{
"jest": {
"transform": {
"^.+\\.svelte$": "jest-transform-svelte"
"^.+\\.svelte$": "svelte-jester"
},
"moduleFileExtensions": ["js", "svelte"]
}
Expand Down Expand Up @@ -71,3 +71,10 @@ with any testing framework and runner you're comfortable with.
```
npm run test
```

## Babel / Preprocessors

If you'd like to also include [Babel](https://babeljs.io/) or any
[Svelte preprocessors](https://github.com/kaisermann/svelte-preprocess) then
simply follow the instructions over at
[svelte-jester](https://github.com/mihar-22/svelte-jester#babel).