Merge pull request #177 from nvh95/svelte

feat: Add svelte example

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
 

examples/svelte/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store

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
+```

examples/svelte/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/svelte/jest.config.js

@@ -0,0 +1,18 @@
+export default {
+  setupFilesAfterEnv: ['<rootDir>/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',
+};

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"
+  }
+}

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 = {};

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();
+  });
+});

examples/svelte/src/App.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Counter from './lib/Counter.svelte';
+  let counterComponent
+</script>
+
+<main>
+  <div class="logo-wrapper">
+    <img src="./images/logo.svg" alt="Svelte">
+  </div>
+  <button on:click={() => counterComponent.increment()} >Increment with another button</button>
+  <Counter bind:this = {counterComponent}/>
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  .logo-wrapper {
+    padding-bottom: 20px;
+  }
+
+  img {
+    height: 10rem;
+    width: 10rem;
+  }
+
+</style>

examples/svelte/src/lib/Counter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  export let count: number = 0;
+  export const increment = () => {
+    count += 1;
+    dispatch('countChanged', count);
+  };
+</script>
+
+<button on:click={increment}>
+  Clicks: {count}
+</button>
+
+<style>
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>

examples/svelte/src/lib/increment.ts

@@ -0,0 +1,4 @@
+export function increment(val: number) {
+  val += 1;
+  return val;
+}

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;

examples/svelte/src/setupTests.ts

@@ -0,0 +1,5 @@
+import { jestPreviewConfigure } from 'jest-preview';
+
+jestPreviewConfigure({
+  autoPreview: true,
+});

examples/svelte/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

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(),
+};

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"]
+}

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()],
+});