svelte - testting

.eslintrc.js

module.exports = {
  parserOptions: {
    sourceType: 'module',
  },
  env: {
    es2020: true,
    browser: true,
    node: true,
    jest: true,
  },
  parser: 'babel-eslint',
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:compat/recommended',
    'plugin:jest/recommended',
  ],
  plugins: ['svelte3'],
  settings: {
    'import/extensions': ['.js', '.ts', '.svelte'],
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts'],
    },
    'import/ignore': ['.svelte'],
    'svelte3/ignore-styles': () => true,
  },
  overrides: [
    {
      files: '**/*.js',
      extends: 'plugin:prettier/recommended',
    },
    {
      files: '*.ts',
      parser: '@typescript-eslint/parser',
      extends: [
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:import/typescript',
        'plugin:prettier/recommended',
      ],
    },
    {
      files: '*.svelte',
      processor: 'svelte3/svelte3',
      extends: 'prettier',
    },
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

app.spec.js

import '@testing-library/jest-dom/extend-expect';
import { render, wait } from '@testing-library/svelte';
import App from './app.svelte';

describe('app', () => {
  test('programmatically change props', async () => {
    const { component, getByText } = render(App, { props: { name: 'world' } });
    expect(getByText('Hello world!')).toBeInTheDocument();
    component.$set({ name: 'foo' });
    await wait(() => expect(getByText('Hello foo!')).toBeInTheDocument());
  });
});

app.stories.js

import App from './app.svelte';

export default {
  title: 'App',
};

export const name = () => ({
  Component: App,
  props: { name: 'Story' },
});

app.svelte

<script>
  import Counter from '../counter/counter.svelte';
  import { sum } from './sum.ts';

  export let name;
</script>

<h1>Hello {name}!</h1>

<p>
  Sum:
  <span>{sum(4, 2)}</span>
</p>

<Counter />

<style src="./styles.css">

</style>

package.json

{
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-modules": "^0.1.0",
    "@babel/preset-typescript": "^7.7.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/svelte": "^1.9.1",
    "@types/jest": "^24.0.23",
    "@typescript-eslint/eslint-plugin": "^2.8.0",
    "@typescript-eslint/parser": "^2.8.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-plugin-compat": "^3.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^23.0.4",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-svelte3": "^2.7.3",
    "jest": "^24.9.0",
    "jest-transform-svelte": "^2.1.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^7.0.23",
    "postcss-import": "^12.0.1",
    "postcss-load-config": "^2.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^1.19.1",
    "prettier-plugin-svelte": "^0.7.0",
    "rimraf": "^3.0.0",
    "rollup": "^1.27.2",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-svelte": "^5.1.1",
    "rollup-plugin-terser": "^5.1.2",
    "style-loader": "^1.0.0",
    "svelte": "^3.15.0",
    "svelte-loader": "^2.13.6",
    "svelte-preprocess": "^3.2.6",
    "typescript": "^3.7.2",
    "webpack": "^5.0.0-beta.6",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.2",
    "@babel/runtime-corejs3": "^7.7.2",
    "effector": "^20.6.2"
  },
  "scripts": {
    "format": "prettier --write **/*.{html,svelte,json} !tsconfig.json --ignore-path .gitignore",
    "lint:check:styles": "",
    "lint:check:scripts": "eslint --print-config src/index.js | eslint-config-prettier-check",
    "lint:fix:styles": "stylelint --fix **/*.{css,svelte} --ignore-path .gitignore",
    "lint:fix:scripts": "eslint --fix **/*.{js,ts,svelte} --ignore-path .gitignore",
    "lint:check": "run-p lint:check:*",
    "lint": "run-p lint:fix:*",
    "typecheck": "tsc",
    "test": "NODE_ENV=test jest",
    "start": "webpack-dev-server",
    "build": "NODE_ENV=production rollup -c"
  },
  "prettier": {
    "svelteSortOrder": "scripts-markup-styles",
    "svelteStrictMode": true,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "always"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ],
    "production": [
      "last 2 chrome versions"
    ]
  },
  "babel": {
    "presets": [
      "@babel/modules",
      "@babel/typescript"
    ],
    "plugins": [
      [
        "@babel/transform-runtime",
        {
          "corejs": 3,
          "useESModules": true
        }
      ],
      "@babel/proposal-optional-chaining",
      [
        "@babel/proposal-pipeline-operator",
        {
          "proposal": "minimal"
        }
      ]
    ],
    "env": {
      "test": {
        "presets": [
          [
            "@babel/env",
            {
              "targets": {
                "node": "current"
              }
            }
          ]
        ]
      }
    }
  },
  "jest": {
    "transform": {
      "^.+\\.[jt]s$": "babel-jest",
      "^.+\\.svelte$": "jest-transform-svelte"
    },
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-dom/extend-expect"
    ]
  }
}

styles.css

h1 {
  color: purple;
}

p {
  color: blue;

  & span {
    color: orange;
  }
}