Svelteとても楽しいです。
こうしたらもっと楽だよとか、設定間違ってるよとかあればご指摘頂けると嬉しいです。

SvelteKitが安定したらそちらに移行するのが良いと思います。

この記事でやること

sapper-template導入
Linter(ESLint)とFormatter(Prettier)導入
Unit/Components Testing(Jest)導入
E2E Testing(Cypress)導入
git hook(husky)導入

コード

yoshida-san/sapper-ext: Svelte development environment

参考記事

先人の知恵をお借りして進めていきます。いつものことながら先人には感謝しかないです。

Sapperについて

こちらを参照ください。Svelteについてはこちらを参照ください。
Sapperって名前、良いですよね。

環境構築

IDEはVSCodeを使っていきます。

~$ npx degit "sveltejs/sapper-template#rollup" sapper-sample
~$ cd sapper-sample
~$ npm i
~$ npm run dev

localhost:3000で確認して'GREATE SUCCESS!'が見えればOK。

TypeScript support

※一応記載しておきますが、今回はTSを導入せずに進めていきます。
TSサポートは嬉しいですがLinterやFormatterも公式でサポートされる日が待ち遠しいですね。

~$ node scripts/setupTypeScript.js
~$ npm i
~$ npm run build

これで導入は完了ですが、そのままTypeScriptコードを書くとbuildでコケます。scriptタグにlang属性を追加する必要があります。src/routes/about.svelteで例を記します。

<script lang='ts'>
    const title: string = 'About!!!'
</script>

<svelte:head>
    <title>{title}</title>
</svelte>

<h1>About this site</h1>

<p>This is the 'about' page. There's not much here.</p>

VSCodeプラグインのSvelte for VS Codeをインストールしておきましょう。

eslint

~$ npm i -D eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-svelte3 eslint-config-standard

.eslintrc.js

module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  extends: [
    'standard'
  ],
  plugins: [
    'svelte3'
  ],
  ignorePatterns: [
    '/node_modules/',
    '/__sapper__/',
    '/src/node_modules/@sapper/'
  ],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {},
  settings: {}
}

以下のコマンドで動作確認（sapper-templateがそのままならそれなりの量がエラーになるはず）。

npx eslint --ext svelte,js src/

standardそのままで利用するとscriptタグのラインでno-multiple-empty-linesのエラーが発生してしまいます。.eslintrc.jsのrulesで対応していきます。

'no-multiple-empty-lines': [
    'error',
    {
        max: 2,
        maxBOF: 2,
        maxEOF: 0
    }
]

npm scriptに追加しておきましょう。--fixで整形もできますが整形はPrettierに任せます（ESLintに任せられる範囲で任せる場合は--fixで良いと思います）。

"lint": "eslint --ext svelte,js src/"

prettier

~$ npm i -D prettier-plugin-svelte prettier

.prettierrc.js
（あえてフォーマットをぐちゃぐちゃにしてます）

module.exports = {
    svelteSortOrder : "options-scripts-markup-styles",
    svelteStrictMode: false,
  svelteBracketNewLine: true,
          svelteAllowShorthand: true,
  singleQuote: true,
  trailingComma: "none",
    tabWidth: 2,
  semi: false
}

以下のコマンドで動作確認。

npx prettier .prettierrc.js

整形後のコードが表示されていればOKです。--writeオプションを付けて実行すればコードが自動で整形されます。

続いて以下のコマンドで整形します。

npx prettier --write 'src/**/*.{js,svelte}'

eslintのspace-before-function-parenでエラーが発生します。しかしながらeslintのspace-before-function-parenに該当する設定がprettierには無く、ここが問題となってしまいます。ここではrulesを追加することで対応していきます。

'space-before-function-paren': ['error', 'never']

JavaScript Standard Styleからズレていくのはあまり良いとは言えませんがやむ無し...。rulesの細かい調整等は開発チームのコーディング規約に準じて修正してください。

最後にnpm scriptに追加しておきましょう。

"format": "prettier --write 'src/**/*.{js,svelte}'"

VSCode Extension

ファイル保存時にフォーマットをかける場合は、.vscode/setting.jsonに以下を追加します（またはPreferences->Settingsから設定します）。

"editor.fomatOnSave": true

Sample Code

テスト用にコードを用意します。
src/routes配下にcounterディレクトリを作成します。counterディレクトリ内にSvelte: Examples - Custom Storesをベースにしたコードを記述したファイルを作成します。

src/routes/counter/index.svelte

<script>
  import { count } from './store.js'
</script>

<h1>The count is <span data-test="result">{$count}</span></h1>

<button data-test="increment" on:click={count.increment}>+</button>
<button data-test="decrement" on:click={count.decrement}>-</button>
<button data-test="reset" on:click={count.reset}>reset</button>

src/routes/counter/store.js

import { writable } from 'svelte/store'

function createCount() {
  const { subscribe, set, update } = writable(0)

  return {
    subscribe,
    increment: () => update((n) => n + 1),
    decrement: () => update((n) => n - 1),
    reset: () => set(0),
    set: (n) => set(n)
  }
}

export const count = createCount()

ファイルの作成が完了したら、src/components/Nav.svelteにリンクを追加。

<li>
  <a aria-current={segment === "counter" ? "page" : undefined} href="counter">
    counter
  </a>
</li>

Unit testing

Ready

~$ npm i -D jest babel-jest @babel/core @babel/preset-env

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '87',
          firefox: '82',
          safari: '14',
          node: 'current'
        }
      }
    ]
  ]
}

jest.config.js

module.exports = {
  verbose: true,
  transform: {
    "^.+\\.js$": "babel-jest"
  }
}

.eslintrc.jsのenvに以下を追加。

env: {
  :
  'jest/globals': true
}

Testing

test/unit/counter/store.test.js

import { get } from 'svelte/store'
import { count } from '../../../src/routes/counter/store.js'

describe('Testing counter/store', () => {
  it('Increment(Positive number)', () => {
    count.set(0)
    expect(get(count)).toBe(0)
    count.increment()
    expect(get(count)).toBe(1)
  })

  it('Increment(Negative number)', () => {
    count.set(-100)
    expect(get(count)).toBe(-100)
    count.increment()
    expect(get(count)).toBe(-99)
  })

  it('Decrement(Positive number)', () => {
    count.set(100)
    expect(get(count)).toBe(100)
    count.decrement()
    expect(get(count)).toBe(99)
  })

  it('Decrement(Negative number)', () => {
    count.set(-99)
    expect(get(count)).toBe(-99)
    count.decrement()
    expect(get(count)).toBe(-100)
  })
})

以下のコマンドでUnit unit testを実行します。

~$ npx jest test/unit/
PASS  test/unit/counter/store.test.js
 Testing counter/store
   ✓ Increment(Positive number) (2 ms)
   ✓ Increment(Negative number) (1 ms)
   ✓ Decrement(Positive number)
   ✓ Decrement(Negative number)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        2.938 s

npm scriptに追加しておきます。

"test:unit": "jest test/unit"

Components testing

Ready

~$ npm i -D @testing-library/svelte jest-transform-svelte

jest.config.js

module.exports = {
  verbose: true,
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svelte$': 'jest-transform-svelte'
  },
  moduleFileExtensions: ['js', 'svelte']
}

Testing

test/components/counter/counter.test.js

import { render, fireEvent } from '@testing-library/svelte'
import Counter from '../../../src/routes/counter/index.svelte'

it('Testting counter component', async () => {
  const { container } = render(Counter)
  const incrementButton = container.querySelector(
    'button[data-test="increment"]'
  )
  const resultText = container.querySelector('span[data-test="result"]')

  await fireEvent.click(incrementButton)
  expect(resultText.textContent).toBe('1')
})

以下のコマンドでComponent testを実行します。

~$ npx jest test/components/
PASS  test/components/counter/counter.test.js
 ✓ Testting counter component (28 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.764 s

npm scriptに追加しておきます。

"test:components": "jest test/components"

E2E testing

Ready

~$ npm i -D cypress

cypress.json

{
  "video": false,
  "baseUrl": "http://localhost:3000",
  "fixturesFolder": "test/e2e/fixtures",
  "integrationFolder": "test/e2e/integration",
  "screenshotsFolder": "test/e2e/screenshots",
  "videosFolder": "test/e2e/videos",
  "pluginsFile": false,
  "supportFile": false
}

Testing

test/e2e/integration/counter.test.js

it('Counter increment', () => {
  cy.visit('/counter')
  cy.get('span').should('have.text', '0')
  cy.get('button[data-test="increment"]').should('have.text', '+')
  cy.get('button[data-test="increment"]').click()
  cy.get('span[data-test="result"]').should('have.text', '1')
})

it('Counter decrement', () => {
  cy.visit('/counter')
  cy.get('span').should('have.text', '0')
  cy.get('button[data-test="decrement"]').should('have.text', '-')
  cy.get('button[data-test="decrement"]').click()
  cy.get('span[data-test="result"]').should('have.text', '-1')
})

テスト前にビルド&ローカルサーバ起動を行います。

~$ npm run build
~$ npm run start

cypressを走らせます（またはopenで起動してアプリケーション内でテストを実行します）。

~$ npx cypress run
or
~$ npx cypress open

Git hooks

Ready

~$ npm i -D husky

lint-stagedは使っていませんが、必要に応じてlint-stagedを併用するのが良いと思います。

Hooks settings

commitのタイミングでlint && formatを走らせて、pushのタイミングでtest:unit && test:componentsを走らせます。

package.json

"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm run format",
    "pre-push": "npm run test:unit && npm run test:components"
  }
}

おわり

環境周りはまだまだ変化していくと思うので、半年後には役に立たない記事になっていそうな気がします。LintやFormatter、Testing等もSapperに含まれたらいいですね。

Cypressを初めて使いましたが学習コスト低くて良いですね。導入も簡単です。

sapper-templateを使ってSvelteの開発環境を構築する

この記事でやること

コード

参考記事

Sapperについて

環境構築

TypeScript support

eslint

prettier

VSCode Extension

Sample Code

Unit testing

Ready

Testing

Components testing

Ready

Testing

E2E testing

Ready

Testing

Git hooks

Ready

Hooks settings

おわり