svelte/テストの仕方を確認 の変更点

更新 
[[プログラミング/svelte]]

* テストの仕方を確認 [#f1f86045]

https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF

 LANG: console
 $ pnpm create svelte@latest testenv
 .../Local/pnpm/store/v3/tmp/dlx-41072    |   +6 +
 Packages are hard linked from the content-addressable store to the virtual store.
   Content-addressable store is at: C:\Users\osamu\AppData\Local\pnpm\store\v3
   Virtual store is at:             ../../Users/osamu/AppData/Local/pnpm/store/v3/tmp/dlx-41072/node_modules/.pnpm
 .../Local/pnpm/store/v3/tmp/dlx-41072    | Progress: resolved 6, reused 0, downloaded 6, added 6, done
 
 create-svelte version 4.2.0
 
 ┌  Welcome to SvelteKit!
 │
 ◇  Which Svelte app template?
 │  Skeleton project
 │
 ◇  Add type checking with TypeScript?
 │  Yes, using TypeScript syntax
 │
 ◇  Select additional options (use arrow keys/space bar)
 │  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
 │
 └  Your project is ready!
 
 ✔ Typescript
   Inside Svelte components, use <script lang="ts">
 
 ✔ ESLint
   https://github.com/sveltejs/eslint-plugin-svelte
 
 ✔ Prettier
   https://prettier.io/docs/en/options.html
   https://github.com/sveltejs/prettier-plugin-svelte#options
 
 ✔ Playwright
   https://playwright.dev
 
 ✔ Vitest
   https://vitest.dev
 
 Install community-maintained integrations:
   https://github.com/svelte-add/svelte-add
 
 Next steps:
   1: cd testenv
   2: npm install (or pnpm install, etc)
   3: git init && git add -A && git commit -m "Initial commit" (optional)
   4: npm run dev -- --open
 
 To close the dev server, hit Ctrl-C
 
 Stuck? Visit us at https://svelte.dev/chat
 $ cd testenv
 $ pnpm install
 $ git init && git add -A && git commit -m "Initial commit"
 $ pnpm run dev
 
 > testenv@0.0.1 dev (home)\svelte\testenv
 > vite dev
 
 
 Forced re-optimization of dependencies
 
   VITE v4.3.9  ready in 1901 ms
 
   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h to show help
 
   Shortcuts
   press r to restart the server
   press u to show server url
   press o to open in browser
   press c to clear console
   press q to quit

ここで o を押すとブラウザが立ち上がって Welcome to SvelteKit が表示された。

&ref(プログラミング/svelte/vite-dev.png);

^C で抜けて、

 LANG: console
 $ cat package.json 
 {
         "name": "testenv",
         "version": "0.0.1",
         "private": true,
         "scripts": {
                 "dev": "vite dev",
                 "build": "vite build",
                 "preview": "vite preview",
                 "test": "playwright test",
                 "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
                 "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
                 "test:unit": "vitest",
                 "lint": "prettier --plugin-search-dir . --check . && eslint .",
                 "format": "prettier --plugin-search-dir . --write ."
         },
         "devDependencies": {
                 "@playwright/test": "^1.28.1",
                 "@sveltejs/adapter-auto": "^2.0.0",
                 "@sveltejs/kit": "^1.5.0",
                 "@typescript-eslint/eslint-plugin": "^5.45.0",
                 "@typescript-eslint/parser": "^5.45.0",
                 "eslint": "^8.28.0",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-plugin-svelte": "^2.26.0",
                 "prettier": "^2.8.0",
                 "prettier-plugin-svelte": "^2.8.1",
                 "svelte": "^3.54.0",
                 "svelte-check": "^3.0.1",
                 "tslib": "^2.4.1",
                 "typescript": "^5.0.0",
                 "vite": "^4.3.0",
                 "vitest": "^0.25.3"
         },
         "type": "module"
 }

** vitest [#seaa70b8]

 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 [#n96c68b1]

 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
 
&ref(プログラミング/svelte/playwright-gui.png,,50%);

うまく行きそうだ。

 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 すらセットアップの必要がないとは。。。
Counter: 359 (from 2010/06/03), today: 2, yesterday: 0