プログラミング/svelte の履歴(No.3)

いまのところ情報収集中†

• SvelteKit+Superforms+Prisma+Luciaでログイン機能を爆速で実装する
  https://zenn.dev/gawarago/articles/f75f5113a3803d
• SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
  https://zenn.dev/kosei28/articles/d965f221a656fd
• Vitest / Playwrightを使ってSvelteのコンポーネントをテストする
  https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF

VS Code 上の GitBash で nvm が動かない†

VS Code を起動中に nvm をインストールすると、

LANG: console
$ nvm
bash: nvm: command not found

とか、

LANG: console
$ nvm install lts
ERROR open \settings.txt: The system cannot find the file specified.

となる。

これは環境変数の更新が VS Code に認識されていないためなので、 VS Code を一旦落として立ち上げなおすと動くようになる。

LANG: console
$ node
bash: node: command not found
$ nvm list

   18.16.0

のような場合は、

LANG: console
$ nvm use 18.16.0
Now using node v18.16.0 (64-bit)

$ nvm list

 * 18.16.0 (Currently using 64-bit executable)

$ node
 Welcome to Node.js v18.16.0.

のように nvm use する。

pnpm を入れる†

良いうわさを聞くので。

LANG: console
$ 'npm' install -g pnpm

added 1 package in 6s

そして ~/.bashrc に、

alias npm=pnpm

としてしまう。

VS Code 設定†

• フォント Myrica
  https://www.sejuku.net/blog/60345 を参考にした
• テーマファイルについて
  https://coliss.com/articles/build-websites/operation/work/best-of-visual-studio-code-themes.html
• アドオン
  • Japanese Language Pack for Visual Studio Code
    https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
  • Keyboard Macro Beta
    https://marketplace.visualstudio.com/items?itemName=tshino.kb-macro
  • macro-commander (Command Runner)
    https://marketplace.visualstudio.com/items?itemName=jeff-hykin.macro-commander
  • GLSL Lint (WebGL をやる場合)
    https://marketplace.visualstudio.com/items?itemName=dtoplak.vscode-glsllint
  • Shader languages support for VS Code (WebGL をやる場合)
    https://marketplace.visualstudio.com/items?itemName=slevesque.shader
  • ESLint
    https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
  • GitLens — Git supercharged
    https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
  • npm Intellisense
    https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
  • Playwright Test for VSCode
    https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
  • Prettier - Code formatter
    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  • Pretty TypeScript Errors
    https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
  • Prisma
    https://marketplace.visualstudio.com/items?itemName=Prisma.prisma
  • Svelte for VS Code
    https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

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 すらセットアップの必要がないとは。。。