svelte/テストの仕方を確認

vitest†

LANG: console
$ pnpm run test:unit

> testenv@0.0.1 test:unit (home)\svelte\testenv
> vitest


 DEV  v0.25.8 ~/svelte/testenv

 ✓ src/index.test.ts (1)

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  12:11:24
   Duration  2.21s (transform 720ms, setup 0ms, collect 77ms, tests 6ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit

  Watch Usage
  press a to rerun all tests
  press f to rerun only failed tests
  press u to update snapshot
  press p to filter by a filename
  press t to filter by a test name regex pattern
  press q to quit

別の terminal から、

LANG: console
$ touch src/index.test.ts

すると、再度テストが実行される。

LANG: console
$ cat vite.config.ts 
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
        plugins: [sveltekit()],
        test: {
                include: ['src/**/*.{test,spec}.{js,ts}']
        }
});

となっているので、src/ の下のすべての .test.ts および .spec.ts がテストの対象になる。

PlayWright†

LANG: console
$ pnpm run test

> testenv@0.0.1 test (home)\svelte\testenv
> playwright test


Running 1 test using 1 worker

[WebServer]
[WebServer]
[WebServer]
  ✘  1 test.ts:3:1 › index page has expected h1 (58ms)


  1) test.ts:3:1 › index page has expected h1  ──────────────────────────────────────────────────────

    Error: browserType.launch: Executable doesn't exist at C:\Users\osamu\AppData\Local\ms-playwright\chromium-1064\chrome-win\chrome.exe
    ╔═════════════════════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated. ║
    ║ Please run the following command to download new browsers:              ║
    ║                                                                         ║
    ║     npx playwright install                                              ║
    ║                                                                         ║
    ║ <3 Playwright Team                                                      ║
    ╚═════════════════════════════════════════════════════════════════════════╝




  1 failed
    test.ts:3:1 › index page has expected h1 
───────────────────────────────────────────────────────
 ELIFECYCLE  Test failed. See above for more details.

ふむ。言われた通りにしよう。

LANG: console
$ npx playwright install
Downloading Chromium 114.0.5735.35 (playwright build v1064) from https://playwright.azureedge.net/builds/chromium/1064/chromium-win64.zip
113.5 Mb [====================] 100% 0.0s
Chromium 114.0.5735.35 (playwright build v1064) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\chromium-1064
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-win64.zip
1.4 Mb [====================] 100% 0.0s
FFMPEG playwright build v1009 downloaded to C:\Users\osamu\AppData\Local\ms-playwright\ffmpeg-1009
Downloading Firefox 113.0 (playwright build v1408) from https://playwright.azureedge.net/builds/firefox/1408/firefox-win64.zip79.7 Mb [====================] 100% 0.0s
Firefox 113.0 (playwright build v1408) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\firefox-1408
Downloading Webkit 16.4 (playwright build v1848) from https://playwright.azureedge.net/builds/webkit/1848/webkit-win64.zip
45.2 Mb [====================] 100% 0.0s
Webkit 16.4 (playwright build v1848) downloaded to C:\Users\osamu\AppData\Local\ms-playwright\webkit-1848
$ pnpm run test
> testenv@0.0.1 test (home)\svelte\testenv
> playwright test


Running 1 test using 1 worker

[WebServer]
[WebServer]
[WebServer]
  ✓  1 test.ts:3:1 › index page has expected h1 (967ms)

  1 passed (4.0s)
$ ls -a test-results/
./  ../

かなり時間がかかるけど、ちゃんと動いたと言っている。 test-results/ には何も入っていない。

上では 4.0s かかったと言っているけど実際にはテストが走り始めるまでに 20秒近くかかっていて、そっちの方がずっと長い。

LANG: console
$ time node_modules/.bin/playwright test

Running 1 test using 1 worker

[WebServer]
[WebServer]
[WebServer]
  ✓  1 test.ts:3:1 › index page has expected h1 (473ms)

  1 passed (3.0s)

real    0m22.550s
user    0m0.076s
sys     0m0.247s

gui を使うことにして立ち上げっぱなしにすると、起動にかかる時間を待たずに済む。

LANG: console
$ node_modules/.bin/playwright test --ui

うまく行きそうだ。

LANG: console
$ cat playwright.config.ts 
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
        webServer: {
                command: 'npm run build && npm run preview', 
                port: 4173
        },
        testDir: 'tests',
        testMatch: /(.+\.)?(test|spec)\.[jt]s/
};

tests/ フォルダの *.test.ts のようなファイルがテスト対象になる。

あーと、これを見ると ファイルを更新した場合には npm run build をし直さなければならないっぽいのでその点には注意が必要だ。

LANG: console
$ git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        test-results/

nothing added to commit but untracked files present (use "git add" to track)

となってしまうので、.gitignore に /test-results を追加することも必要。

LANG: console
$ echo /test-results >> .gitignore
$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   .gitignore

no changes added to commit (use "git add" and/or "git commit -a")
$ git commit -a -m "add /test-results to .gitignore"

何にしても、ユニットテストばかりでなく E2E テストまで Out of the box で簡単に行えるのはすごい。
apache2 や nginx どころか WSL すらセットアップの必要がないとは。。。