diff --git a/README.md b/README.md index d2708642..5329f712 100644 --- a/README.md +++ b/README.md @@ -83,10 +83,11 @@ You also need to start the Jest Preview Server by running the CLI `jest-preview` ## Examples -- Use with [Vite](https://vitejs.dev/): [Example with Vite](https://www.jest-preview.com/docs/examples/vite-react) -- Use with [Create React App](https://create-react-app.dev/): [Example with CRA](https://www.jest-preview.com/docs/examples/create-react-app) -- Use with [NextJs Rust Compiler](https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler): [Example with NextJs Rust Compiler](https://www.jest-preview.com/docs/examples/next-rust) -- Use with [NextJS Babel](https://nextjs.org/docs/testing#setting-up-jest-with-babel): [Example with CRA](https://www.jest-preview.com/docs/examples/next-babel) +- Use with [Vite React](https://vitejs.dev/): https://www.jest-preview.com/docs/examples/vite-react +- Use with [Create React App](https://create-react-app.dev/): https://www.jest-preview.com/docs/examples/create-react-app +- Use with [NextJs Rust Compiler](https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler): https://www.jest-preview.com/docs/examples/next-rust +- Use with [NextJS Babel](https://nextjs.org/docs/testing#setting-up-jest-with-babel): https://www.jest-preview.com/docs/examples/next-babel +- Use with [Svelte](https://svelte.dev): https://www.jest-preview.com/docs/examples/svelte ## Feedback diff --git a/examples/svelte/README.md b/examples/svelte/README.md index 855b1391..17b799b2 100644 --- a/examples/svelte/README.md +++ b/examples/svelte/README.md @@ -1,6 +1,6 @@ # Use with Svelte -This example demonstrates how to use `jest-preview` with [`Svelte`](https://svelte.dev) and [`Svelte Testing Library`](https://testing-library.com/docs/svelte-testing-library/intro/) +This example demonstrates how to use `jest-preview` with [**Svelte**](https://svelte.dev) and [**Svelte Testing Library**](https://testing-library.com/docs/svelte-testing-library/intro/) ## Install Jest @@ -18,11 +18,12 @@ Install Jest Preview npm install --save-dev jest-preview ``` -Configure code transforms as follow: +[Configure code transforms](https://www.jest-preview.com/docs/getting-started/installation#2-configure-jests-transform-to-transform-css-and-files) as follow: ```js // jest.config.js transform: { + // ... "^.+\\.(css|scss|sass)$": "jest-preview/transforms/css", "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", } diff --git a/website/blog/2022-07-02-svelte-example/index.md b/website/blog/2022-07-02-svelte-example/index.md new file mode 100644 index 00000000..12f8af88 --- /dev/null +++ b/website/blog/2022-07-02-svelte-example/index.md @@ -0,0 +1,46 @@ +--- +slug: svelte-example +title: Jest Preview with Svelte +description: If you use Jest to write tests for Svelte, you can also use Jest Preview to write and debug your tests faster +authors: [nvh95] +tags: [jest-preview, svelte, example] +image: /img/svelte-support.jpg +--- + +[jest-preview](https://www.npmjs.com/package/jest-preview) is initially designed to work with jest, react and react-testing-library. However, the package is framework-agnostic, and you can use it with any testing libraries. Today, we add [an example](https://github.com/nvh95/jest-preview/tree/main/examples/svelte) of using it with [**Svelte**](https://svelte.dev) and [**Svelte Testing Library**](https://testing-library.com/docs/svelte-testing-library/intro/) + + + +![Use Jest Preview with Svelte](./svelte-animated.gif) + +Now, you can easily preview your UI in Jest when using Svelte just by 2 steps: + +1. Open Jest Preview Dashboard: + +```bash +jest-preview +``` + +2. Add `debug()` to wherever you want to preview: + +```diff +import { render, fireEvent, screen } from '@testing-library/svelte'; +import { debug } from 'jest-preview'; +import App from '../../App.svelte'; + +describe('Counter Component', () => { + it('it changes count when button is clicked', async () => { + render(App); + const button = screen.getByText(/Clicks:/); + expect(button.innerHTML).toBe('Clicks: 0'); + await fireEvent.click(button); + expect(button.innerHTML).toBe('Clicks: 1'); + ++ debug(); + }); +}); +``` + +That's it. You can see the full example and detailed instruction at https://github.com/nvh95/jest-preview/tree/main/examples/svelte. + + diff --git a/website/blog/2022-07-02-svelte-example/svelte-animated.gif b/website/blog/2022-07-02-svelte-example/svelte-animated.gif new file mode 100644 index 00000000..79fe172f Binary files /dev/null and b/website/blog/2022-07-02-svelte-example/svelte-animated.gif differ diff --git a/website/static/img/svelte-support.jpg b/website/static/img/svelte-support.jpg new file mode 100644 index 00000000..87354be8 Binary files /dev/null and b/website/static/img/svelte-support.jpg differ