svelte: update docs (#1298)

* svelte: update docs

* install @vitest/ui

* address feedback

Author: timdeschryver

docs/svelte-testing-library/example.mdx

@@ -25,23 +25,23 @@ sidebar_label: Example
 ## Test
 
 ```js
-// NOTE: jest-dom adds handy assertions to Jest and it is recommended, but not required.
+// NOTE: jest-dom adds handy assertions to Jest (and Vitest) and it is recommended, but not required.
 import '@testing-library/jest-dom'
 
 import {render, fireEvent, screen} from '@testing-library/svelte'
 
 import Comp from '../Comp'
 
 test('shows proper heading when rendered', () => {
-  render(Comp, { name: 'World' })
-  const heading = screen.getByText("Hello World!");
-  expect(heading).toBeInTheDocument();
+  render(Comp, {name: 'World'})
+  const heading = screen.getByText('Hello World!')
+  expect(heading).toBeInTheDocument()
 })
 
 // Note: This is as an async test as we are using `fireEvent`
 test('changes button text on click', async () => {
-  render(Comp, { name: 'World' })
-  const button = screen.getByRole("button")
+  render(Comp, {name: 'World'})
+  const button = screen.getByRole('button')
 
   // Using await when firing events is unique to the svelte testing library because
   // we have to wait for the next `tick` so that Svelte flushes all pending state changes.

docs/svelte-testing-library/faq.mdx

@@ -4,19 +4,23 @@ title: FAQ
 sidebar_label: FAQ
 ---
 
+- [Does this library also work with SvelteKit?](#does-this-library-also-work-with-sveltekit)
 - [Testing file upload component](#testing-file-upload-component)
 
 ---
 
-## Testing file upload component
+## Does this library also work with SvelteKit?
 
-File upload handler not triggering? Use `happy-dom`, not `jsdom`, and make
-sure to use `fireEvent.change(...)` and not `fireEvent.input(...)`.  It seems
-that jsdom (which is at v22.1.0 at the time of this writing) doesn't fake all
-the File object as it should.
+Yes, it does. It requires the same [setup](setup.mdx) as a "normal" Svelte
+project.
 
+## Testing file upload component
 
-See [svelte-testing-library's issue
-219](https://github.com/testing-library/svelte-testing-library/issues/219) for
-more details.
+File upload handler not triggering? Use `happy-dom`, not `jsdom`, and make sure
+to use `fireEvent.change(...)` and not `fireEvent.input(...)`. It seems that
+jsdom (which is at v22.1.0 at the time of this writing) doesn't fake all the
+File object as it should.
 
+See
+[svelte-testing-library's issue 219](https://github.com/testing-library/svelte-testing-library/issues/219)
+for more details.

docs/svelte-testing-library/intro.mdx

@@ -40,5 +40,3 @@ Introduction][dom-solution-explainer] for a more in-depth explanation.
 
 1.  A test runner or framework.
 2.  Specific to a testing framework.
-
-We recommend Vitest as our preference.

docs/svelte-testing-library/setup.mdx

@@ -4,85 +4,95 @@ title: Setup
 sidebar_label: Setup
 ---
 
-We recommend using [Vitest](https://vitest.dev/) but you're free to use the library
-with any testing framework and runner you're comfortable with.
+We recommend using [Vitest](https://vitest.dev/) but you're free to use the
+library with any testing framework and runner you're comfortable with.
 
 ## Vitest
-1.  Install Vitest and jsdom
 
-    ```
-    npm install --save-dev vitest jsdom
-    ```
+1. Install Vitest and jsdom
 
-2.  Add the following to your `package.json`
+We're using `jdom` here as the test environment, but you can use any other
+options e.g `happy-dom`.
 
-    ```json
-    {
-      "scripts": {
-        "test": "vitest run src",
-        "test:watch": "vitest src"
-      }
-    }
-    ```
+```bash npm2yarn
+npm install --save-dev vitest jsdom
+```
 
-3.  You'll need to compile the Svelte components before using them in Vitest, so
-    you need to install
-    [@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and Vite
-    
+Optionally install `@vitest/ui`, which opens a UI within a browser window to
+follow the progress and interact with your tests.
 
-    ```
-    npm install --save-dev @sveltejs/vite-plugin-svelte vite
-    ```
+```bash npm2yarn
+npm install --save-dev @vitest/ui
+```
 
-4.  Add a `vitest.config.ts` configuration file to the root of your project
+1. Add the test scipts to your `package.json` to run the tests with Vitest
 
-    ```js
-    import { defineConfig } from 'vitest/config';
-    import { svelte } from '@sveltejs/vite-plugin-svelte';
+   ```json
+   {
+     "scripts": {
+       "test": "vitest run",
+       "test:ui": "vitest --ui",
+       "test:watch": "vitest"
+     }
+   }
+   ```
 
-    export default defineConfig({
-        plugins: [svelte({ hot: !process.env.VITEST })],
-        test: {
-            include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-            globals: true,
-            environment: 'jsdom'
-        }
-    });
+2. To compile the Svelte components before using them in Vitest, you need to
+   install
+   [@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte)
+   and Vite
 
-    ```
+   ```bash npm2yarn
+   npm install --save-dev @sveltejs/vite-plugin-svelte vite
+   ```
 
-5.  This is optional but it is recommended, you can install
-    [jest-dom](https://github.com/testing-library/jest-dom) to add handy
-    assertions to Jest
+3. Add a `vitest.config.ts` configuration file to the root of your project
 
-    5.1 Install `jest-dom`
+   ```js
+   import {defineConfig} from 'vite'
+   import {svelte} from '@sveltejs/vite-plugin-svelte'
 
-    ```
-    npm install --save-dev @testing-library/jest-dom
-    ```
+   export default defineConfig({
+     plugins: [svelte({hot: !process.env.VITEST})],
+     test: {
+       globals: true,
+       environment: 'jsdom',
+     },
+   })
+   ```
 
-    5.2 import `@testing-library/jest-dom` at the start of your test files
+4. Optionally install [vitest-dom](https://github.com/chaance/vitest-dom) to add
+   handy assertions to Vitest
 
-    ```js
-    import '@testing-library/jest-dom';
-    ```
+   5.1 Install `vitest-dom`
 
-6.  Create your component and a test file (checkout the rest of the docs to see how)
-    and run the following command to run the tests.
+   ```bash npm2yarn
+   npm install --save-dev vitest-dom
+   ```
 
-    ```
-    npm run test
-    ```  
-### SvelteKit
+   5.2 import `vitest-dom` at within the vitest setup file (usually `vitest-setup.(js|ts)`)
+
+   ```js
+    import * as matchers from "vitest-dom/matchers";
+    import { expect } from "vitest";
+    expect.extend(matchers);
+    
+    // or:
+    import "vitest-dom/extend-expect";
+   ```
 
-To use Vitest with SvelteKit install `vitest-svelte-kit`, which includes a preconfigured Vitest configuration for SvelteKit projects.
-You can take a look at the [`vitest-svelte-kit` configuration docs](https://github.com/nickbreaton/vitest-svelte-kit/tree/master/packages/vitest-svelte-kit#configuring) for further instructions.
+5. Create your component and a test file (checkout the rest of the docs to see
+   how) and run the following command to run the tests.
+
+   ```bash npm2yarn
+   npm run test
+   ```
 
 ## Jest
 
 1.  Install Jest & jest-environment-jsdom
 
-    ```
+    ```bash npm2yarn
     npm install --save-dev jest jest-environment-jsdom
     ```
 
@@ -173,8 +183,8 @@ You can take a look at the [`vitest-svelte-kit` configuration docs](https://gith
 
 ### TypeScript
 
-To use TypeScript with Jest, you'll need to install and configure `svelte-preprocess` and
-`ts-jest`. For full instructions, see the
+To use TypeScript with Jest, you'll need to install and configure
+`svelte-preprocess` and `ts-jest`. For full instructions, see the
 [`svelte-jester`](https://github.com/mihar-22/svelte-jester#typescript) docs.
 
 ### Preprocessors