Merge pull request #334 from mihar-22/svelte

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

Author: mihar-22

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`
 

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).