diff --git a/docs/svelte-testing-library/api.md b/docs/svelte-testing-library/api.md index 65182e627..c790e5030 100644 --- a/docs/svelte-testing-library/api.md +++ b/docs/svelte-testing-library/api.md @@ -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` diff --git a/docs/svelte-testing-library/setup.md b/docs/svelte-testing-library/setup.md index 86f24992e..02bf0e418 100644 --- a/docs/svelte-testing-library/setup.md +++ b/docs/svelte-testing-library/setup.md @@ -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` @@ -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"] } @@ -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).