diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx index 3c8d3dc38..26c8fe34a 100644 --- a/docs/svelte-testing-library/example.mdx +++ b/docs/svelte-testing-library/example.mdx @@ -25,7 +25,7 @@ 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' @@ -33,15 +33,15 @@ 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. diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index e37c236c7..bd2ab5dbe 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/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. diff --git a/docs/svelte-testing-library/intro.mdx b/docs/svelte-testing-library/intro.mdx index 38276eacc..375ae98cd 100644 --- a/docs/svelte-testing-library/intro.mdx +++ b/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. diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index 38c7fc50e..6d3c979de 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/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