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/.gitignore b/examples/svelte/.gitignore new file mode 100644 index 00000000..126fe84d --- /dev/null +++ b/examples/svelte/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/dist/ +/.vscode/ +.DS_Store diff --git a/examples/svelte/README.md b/examples/svelte/README.md new file mode 100644 index 00000000..17b799b2 --- /dev/null +++ b/examples/svelte/README.md @@ -0,0 +1,115 @@ +# 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/) + +## Install Jest + +This example follows [Component Testing in Svelte](https://www.thisdot.co/blog/component-testing-in-svelte) from [This Dot Labs](https://www.thisdot.co), credit to [Ignacio Falk](https://twitter.com/flakolefluk). Please follow this tutorial if your project is not setup to use Jest yet. + +## Install and use Jest Preview + +:::info +You can read the generic guide at https://www.jest-preview.com/docs/getting-started/installation +::: + +Install Jest Preview + +```bash +npm install --save-dev jest-preview +``` + +[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", +} +``` + +(You might not need to configure CSS transform if you only use [Svelte built-in CSS solution](https://svelte.dev/tutorial/styling).) + +If you use any global CSS, import in in your jest setup file. You can also opt-in to [Automatic Mode](https://www.jest-preview.com/blog/automatic-mode) by setting `autoPreview` to `true` so your failed test gets a preview automatically! 🤯 + +```js +// setupTests.js +import { jestPreviewConfigure } from 'jest-preview'; +import './app/styles/global.css'; // Import any global CSS + +jestPreviewConfigure({ + // Enable autoPreview so Jest Preview runs automatically + // whenever your test fails, without you having to do anything! + autoPreview: true, +}); +``` + +That's it! Now you can use Jest Preview in your test. First, start Jest Preview Dashboard by + +``` +jest-preview +``` + +Just put `debug()` wherever you want to preview the UI? + +```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(); + }); +}); +``` + +Then run your test command (e.g: `npm run test`). The UI will be previewed at http://localhost:3336 + +You might as well add some NPM scripts for convenience: + +```diff +"scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", ++ "test": "jest --watch", ++ "jest-preview": "jest-preview" +}, +``` + +```bash +npm run jest-preview + +npm run test +``` + +You may even install `npm-run-all` to simplify this further: + +```bash +npm install --save-dev npm-run-all +``` + +```diff +"scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "test": "jest --watch", + "jest-preview": "jest-preview", ++ "test:preview": "npm-run-all -p test jest-preview" +}, +``` + +```bash +npm run test:preview +``` diff --git a/examples/svelte/index.html b/examples/svelte/index.html new file mode 100644 index 00000000..d2f6839b --- /dev/null +++ b/examples/svelte/index.html @@ -0,0 +1,13 @@ + + + + + + + Svelte + TS + Vite App + + +
+ + + diff --git a/examples/svelte/jest.config.js b/examples/svelte/jest.config.js new file mode 100644 index 00000000..61add462 --- /dev/null +++ b/examples/svelte/jest.config.js @@ -0,0 +1,18 @@ +export default { + setupFilesAfterEnv: ['/src/setupTests.ts'], + transform: { + '^.+\\.ts$': 'ts-jest', + '^.+\\.svelte$': [ + 'svelte-jester', + { + preprocess: true, + }, + ], + // Read more at https://www.jest-preview.com/docs/getting-started/installation + '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css', + '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': + 'jest-preview/transforms/file', + }, + moduleFileExtensions: ['js', 'ts', 'svelte'], + testEnvironment: 'jsdom', +}; diff --git a/examples/svelte/package.json b/examples/svelte/package.json new file mode 100644 index 00000000..9fd04322 --- /dev/null +++ b/examples/svelte/package.json @@ -0,0 +1,29 @@ +{ + "name": "testing-svelte", + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json", + "test": "jest --watch", + "jest-preview": "jest-preview" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11", + "@testing-library/svelte": "^3.0.3", + "@tsconfig/svelte": "^2.0.1", + "@types/jest": "^27.0.2", + "jest": "^27.2.4", + "jest-preview": "latest", + "svelte": "^3.37.0", + "svelte-check": "^2.1.0", + "svelte-jester": "^2.3.2", + "svelte-preprocess": "^4.7.2", + "ts-jest": "^27.0.5", + "tslib": "^2.2.0", + "typescript": "^4.3.2", + "vite": "^2.9.13" + } +} diff --git a/examples/svelte/postcss.config.cjs b/examples/svelte/postcss.config.cjs new file mode 100644 index 00000000..7e1d2a90 --- /dev/null +++ b/examples/svelte/postcss.config.cjs @@ -0,0 +1,3 @@ +// Workaround for current setup. You don't need this file in your actual project +// TODO: Remove when move to monorepo +module.exports = {}; diff --git a/examples/svelte/public/favicon.ico b/examples/svelte/public/favicon.ico new file mode 100644 index 00000000..d75d248e Binary files /dev/null and b/examples/svelte/public/favicon.ico differ diff --git a/examples/svelte/public/images/logo.svg b/examples/svelte/public/images/logo.svg new file mode 100644 index 00000000..4bf27965 --- /dev/null +++ b/examples/svelte/public/images/logo.svg @@ -0,0 +1,20 @@ + + + + + + + diff --git a/examples/svelte/src/App.spec.ts b/examples/svelte/src/App.spec.ts new file mode 100644 index 00000000..6ff6b191 --- /dev/null +++ b/examples/svelte/src/App.spec.ts @@ -0,0 +1,19 @@ +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); + await fireEvent.click(button); + await fireEvent.click(button); + await fireEvent.click(button); + + expect(button.innerHTML).toBe('Clicks: 4'); + + debug(); + }); +}); diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte new file mode 100644 index 00000000..06c182d5 --- /dev/null +++ b/examples/svelte/src/App.svelte @@ -0,0 +1,35 @@ + + +
+
+ Svelte +
+ + +
+ + diff --git a/examples/svelte/src/lib/Counter.svelte b/examples/svelte/src/lib/Counter.svelte new file mode 100644 index 00000000..f6235d94 --- /dev/null +++ b/examples/svelte/src/lib/Counter.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/examples/svelte/src/lib/increment.ts b/examples/svelte/src/lib/increment.ts new file mode 100644 index 00000000..068337a8 --- /dev/null +++ b/examples/svelte/src/lib/increment.ts @@ -0,0 +1,4 @@ +export function increment(val: number) { + val += 1; + return val; +} diff --git a/examples/svelte/src/main.ts b/examples/svelte/src/main.ts new file mode 100644 index 00000000..7f13bc6d --- /dev/null +++ b/examples/svelte/src/main.ts @@ -0,0 +1,7 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; diff --git a/examples/svelte/src/setupTests.ts b/examples/svelte/src/setupTests.ts new file mode 100644 index 00000000..966b8ca7 --- /dev/null +++ b/examples/svelte/src/setupTests.ts @@ -0,0 +1,5 @@ +import { jestPreviewConfigure } from 'jest-preview'; + +jestPreviewConfigure({ + autoPreview: true, +}); diff --git a/examples/svelte/src/vite-env.d.ts b/examples/svelte/src/vite-env.d.ts new file mode 100644 index 00000000..4078e747 --- /dev/null +++ b/examples/svelte/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/svelte/svelte.config.js b/examples/svelte/svelte.config.js new file mode 100644 index 00000000..2cd95b6b --- /dev/null +++ b/examples/svelte/svelte.config.js @@ -0,0 +1,7 @@ +import sveltePreprocess from 'svelte-preprocess'; + +export default { + // Consult https://github.com/sveltejs/svelte-preprocess + // for more information about preprocessors + preprocess: sveltePreprocess(), +}; diff --git a/examples/svelte/tsconfig.json b/examples/svelte/tsconfig.json new file mode 100644 index 00000000..f9039a5a --- /dev/null +++ b/examples/svelte/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "resolveJsonModule": true, + "baseUrl": ".", + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true + }, + "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/examples/svelte/vite.config.js b/examples/svelte/vite.config.js new file mode 100644 index 00000000..e3a889ff --- /dev/null +++ b/examples/svelte/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], +}); 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..a19ce222 --- /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: Now you can use Jest Preview in a Svelte app to write and debug 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