Svelte‐セットアップによるテスト駆動開発

プロジェクトの作成

示すright here 最初にSvelteプロジェクトを作成しましょう.

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
$ npm install

作成したプロジェクトには次のパッケージがあります.JSON

{
  "name": "my-svelte-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

ここで見ることができるので、アプリケーションのテストに関する依存関係はありません.テスト関連の依存関係をインストールします.npm i -D jest babel-jest @babel/preset-env svelte-jester冗談* テストランナーであり、また、アサーションとモックアップ機能を持っています.
バベルジェストとプリセットENVは、我々のテストモジュールで最新のJavaScript機能を使用するためです.ES 6インポートを使用するように.
JestはES 6のインポートを持つテストモジュールを実行できません.そこで、JESTをテストモジュールをBabelで変換するよう設定します.
そして最後の1つはsvelte Jesterです.テストモジュールでsvelteファイルをインポートします.Jestはそれらを処理する方法を知りません.JSestがテストを実行する前に、これらのファイルを変換するためにこのsvelte jesterを使用するつもりです.
また、svelteコンポーネントをテストするための特別な依存関係も必要です.そして、そのために我々は使用するつもりですtesting-library npm i -D @testing-library/svelte @testing-library/jest-domテストライブラリ/svelteは、我々のテスト機能でsvelteコンポーネントをレンダリングするためです
テストライブラリ/Jest DOMは、JEST用のカスタムDOM関連要素マッチング機能を持っています.
ここでJESTを設定する必要があります.この設定はpackage.json

// package.json
  },
  // after depedencies we can add
  "jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "svelte"
    ],
    "testEnvironment": "jsdom"
  }

最初に設定した設定はトランスフォームです.そして、この構成で、テストモジュールで使用されるファイルが*の拡張子を持つかどうかを示します.Svelte、それからSvelte Jesterはそれを変えます.を返します.JSの拡張子、それからバベルジェストが変換されます.
2番目の設定はモジュールファイル拡張であり、この中でテストモジュールのファイル拡張子を一覧表示します.Jestは私たちのファイルを見ることができるとすぐにそれを変更を検出するテストを実行します.そして、このリストでは、これらの拡張子を持つファイルの変更を監視するようJestに伝えています.
最後の設定では、test環境はJSDOMに設定されます.JESTバージョン27以前では、これはデフォルトでJSDOMでした.V 27で、それはデフォルトノードです.これはWebアプリケーションをテストするためですので、環境はJSDOMに設定する必要があります.
Babel変換部分については、設定ファイルをプロジェクトに追加する必要があります.パッケージのフォルダで.JSONは、名前のファイルを作成しましょうbabel.config.js .
そしてそのファイルに部分的にペーストします.参考文献here

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

設定を完了しました.最後にテストスクリプトを追加します.

// package.json
  "scripts": {
    // adding
    "test": "jest --watchAll"
  },

ランニングでコンソールからテストを走らせましょうnpm testJestはソースコードを見ており、JSファイルとsvelteファイルの変更を検出するとすぐにテストを実行します.
まだテストモジュールがないので、コンソールに次のメッセージが表示されます.

No tests found, exiting with code 0

テストモジュールを作りましょう.jestは拡張子を持つファイルを探します.specs . jsまたは*.テスト.js私は選びます.京大理
新しいファイルを作成します.アプリ.京大理

// 1 - first lets import the target component.
// lets test App.svelte
import App from './App.svelte';
// 2 - and we are going to render this component
// with @testing-library . lets import
import { render, screen } from '@testing-library/svelte';
// 3 - and lets also import
import '@testing-library/jest-dom';

// 4 -  and lets add our test
it('has Hello Text', () => {
    // 5 - first we render the App.svelte
    render(App);
    // 6 - Then we are going to query the element we
    // are looking for. We will use query functions
    // coming with screen.
    const message = screen.queryByText('Hello Text');
    // 7 - And last part is the assertion
    expect(message).toBeInTheDocument();
})

テストコンソールでは、次の出力を見ます

 FAIL  src/App.spec.js
  ✕ has Hello Text (46 ms)

  ● has Hello Text

    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

      6 |     render(App);
      7 |     const message = screen.queryByText('Hello Text');
    > 8 |     expect(message).toBeInTheDocument();
        |                     ^
      9 | })

      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
      at Object.toBeInTheDocument (node_modules/expect/build/index.js:343:15)
      at Object.<anonymous> (src/App.spec.js:8:21)

  console.warn
    <App> was created without expected prop 'name'


      at new App (src/App.svelte:123:12)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (src/App.spec.js:6:5)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.067 s
Ran all test suites.

Watch Usage: Press w to show more.

アプリはそれの中にこんにちはテキストを持っていません.
アプリ内のすべてをクリアできます.Svelteとちょうどそれに期待されるテキストを追加します.

<!-- App.svelte -->
Hello Text

今テストが通過し、コンソールで次の出力が表示されます.

 PASS  src/App.spec.js
  ✓ has Hello Text (16 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.953 s, estimated 2 s

プロジェクトのテストセットアップを完了しました.

資源

このプロジェクトのためのgithub repoは、ここで見つかります

バッケルブ / dev svelte TDD

Svelteによるテスト駆動開発に関する記事プロジェクトのリポジトリ

また、Svelteプロジェクトの同じセットアップ手順については、このビデオチュートリアルをチェックすることができます
そして、あなたが興味があるならば、私はsvelteで完全なコースTDDを持ちます.Svelte with Test Driven Development
読書ありがとう