chore: switch to vitest from jest (#1342)

* chore: swtich to vitest from jest

* fix

* upates

* fix: duplicate web components

* enable skip lib check

* fix

* fix: tweak e2e testing on github action

* add debugging

* disable assertions

.eslintignore

@@ -1,6 +1,5 @@
 dist
-./jest.config.js
-./jest.e2e.config.js
 ./api-extractor.json
 ./test/fixtures
 ./types
+shim.d.ts

.eslintrc.js

@@ -7,12 +7,10 @@ module.exports = {
     __COMMIT__: true,
     page: true,
     browser: true,
-    context: true,
-    jestPuppeteer: true
+    context: true
   },
   env: {
-    node: true,
-    jest: true
+    node: true
   },
   extends: [
     'plugin:vue/vue3-recommended',

.github/workflows/ci.yml

@@ -11,6 +11,7 @@ permissions:
   contents: read
 env:
   CI: true
+  NODE_OPTIONS: --max-old-space-size=6144
 
 jobs:
   lint:
@@ -103,7 +104,6 @@ jobs:
 
       - name: Run unit tests
         run: |
-          pnpm clean:cache:jest
           pnpm test:cover
 
   test-type:
@@ -164,6 +164,27 @@ jobs:
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
 
+      # https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml#L62
+      # Install playwright's binary under custom directory to cache
+      - name: Set Playwright path
+        if: runner.os != 'Windows'
+        run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/playwright-bin" >> $GITHUB_ENV
+      - name: Set Playwright path (windows)
+        if: runner.os == 'Windows'
+        run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME\.cache\playwright-bin" >> $env:GITHUB_ENV
+
+      - name: Cache Playwright's binary
+        uses: actions/cache@v3
+        with:
+          # Playwright removes unused browsers automatically
+          # So does not need to add playwright version to key
+          key: ${{ runner.os }}-playwright-bin-v1
+          path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+
+      - name: Install Playwright
+        # does not need to explicitly set chromium after https://github.com/microsoft/playwright/issues/14862 is solved
+        run: pnpm playwright install chromium
+
       - name: Restore dist cache
         uses: actions/cache@v3
         with:

.gitignore

@@ -12,9 +12,6 @@ debug.log
 .eslintcache
 **/.vitepress/cache
 
-# jest dump files
-report*.json
-
 *.log
 *.swp
 *.tgz

e2e/bridge/basic.spec.ts

@@ -0,0 +1,21 @@
+import { getText } from '../helper'
+;['composition', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/bridge/${pattern}/basic.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      expect(await getText(page, 'label')).toMatch('言語')
+      expect(await getText(page, 'p')).toMatch('こんにちは、vue-i18n-bridge！')
+    })
+
+    test('change locale', async () => {
+      await page.selectOption('#app select', 'en')
+      expect(await getText(page, 'label')).toMatch('Language')
+      expect(await getText(page, 'p')).toMatch('hello, vue-i18n-bridge!')
+    })
+  })
+})

e2e/bridge/component.test.js → e2e/bridge/component.spec.ts

@@ -1,3 +1,4 @@
+import { getText } from '../helper'
 ;['composition', 'legacy'].forEach(pattern => {
   describe(`${pattern}`, () => {
     beforeAll(async () => {
@@ -7,7 +8,7 @@
     })
 
     test('rendering', async () => {
-      await expect(page).toMatch('こんにちは、かずぽん！')
+      expect(await getText(page, '#app p')).toMatch('こんにちは、かずぽん！')
     })
   })
 })

e2e/bridge/components/datetime-format.test.js → e2e/bridge/components/datetime-format.spec.ts

@@ -1,23 +1,23 @@
+import { getText } from '../../helper'
 describe(`bridge: datetime format component`, () => {
   beforeAll(async () => {
-    await page.emulateTimezone('UTC')
     await page.goto(
       `http://localhost:8080/examples/bridge/composition/components/datetime-format.html`
     )
   })
 
   test('rendering', async () => {
-    await expect(page).toMatch(
+    expect(await getText(page, '#app p.p1')).toMatch(
       /([1-9]|1[0-2])\/([1-9]|[12]\d|3[01])\/([12]\d{3})/
     )
-    await expect(page).toMatch(
-      /(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/([12]\d{3}), (0[0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (AM|PM)/
+    expect(await getText(page, '#app p.p2')).toMatch(
+      /(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/([12]\d{3}), (0[0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9])\u202f(AM|PM)/
     )
-    await expect(page).toMatch(
+    expect(await getText(page, '#app p.p3')).toMatch(
       /令和([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) 協定世界時/
     )
-    await expect(page).toMatch(
-      /R([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) 協定世界時/
+    expect(await getText(page, '#app span.p4')).toMatch(
+      /([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) 協定世界時/
     )
   })
 })

e2e/bridge/components/number-format.spec.ts

@@ -0,0 +1,15 @@
+import { getText } from '../../helper'
+describe(`bridge: number format component`, () => {
+  beforeAll(async () => {
+    await page.goto(
+      `http://localhost:8080/examples/bridge/composition/components/number-format.html`
+    )
+  })
+
+  test('rendering', async () => {
+    expect(await getText(page, '#app p.p1')).toMatch('100')
+    expect(await getText(page, '#app p.p2')).toMatch('$100.00')
+    expect(await getText(page, '#app p.p3')).toMatch('￥100')
+    expect(await getText(page, '#app div.slot')).toMatch('€1,234.00')
+  })
+})

e2e/bridge/components/translation.spec.ts

@@ -0,0 +1,26 @@
+import { getText } from '../../helper'
+describe(`bridge: translation component`, () => {
+  beforeAll(async () => {
+    await page.goto(
+      `http://localhost:8080/examples/bridge/composition/components/translation.html`
+    )
+  })
+
+  test('rendering', async () => {
+    expect(await getText(page, '#app p.name')).toMatch('こんにちは、kazupon！')
+    expect(await getText(page, '#app p.list')).toMatch('hello, English!')
+    expect(await getText(page, '#app p.linked')).toMatch(
+      'こんにちは、かずぽん！ ごきげんいかが？'
+    )
+    expect(await getText(page, '#app p.plural')).toMatch('no bananas')
+  })
+
+  test('change quantity', async () => {
+    await page.selectOption('#app select', '1')
+    expect(await getText(page, '#app p.plural')).toMatch('1 banana')
+    await page.selectOption('#app select', '2')
+    expect(await getText(page, '#app p.plural')).toMatch('2 bananas')
+    await page.selectOption('#app select', '0')
+    expect(await getText(page, '#app p.plural')).toMatch('no bananas')
+  })
+})

e2e/bridge/plural.spec.ts

@@ -0,0 +1,20 @@
+import { getText } from '../helper'
+;['composition', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/bridge/${pattern}/plural.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      expect(await getText(page, '#app p.p1')).toMatch('car')
+      expect(await getText(page, '#app p.p2')).toMatch('cars')
+      expect(await getText(page, '#app p.p3')).toMatch('no apples')
+      expect(await getText(page, '#app p.p4')).toMatch('one apple')
+      expect(await getText(page, '#app p.p5')).toMatch('10 apples')
+      expect(await getText(page, '#app p.p7')).toMatch('1 banana')
+      expect(await getText(page, '#app p.p9')).toMatch('too many bananas')
+    })
+  })
+})

e2e/bridge/scope/global.spec.ts

@@ -0,0 +1,28 @@
+import { getText } from '../../helper'
+;['composition', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/bridge/${pattern}/scope/global.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      expect(await getText(page, '#app p.parent')).toMatch('こんにちは、世界！')
+      expect(await getText(page, '#app p.child')).toMatch('こんにちは！')
+      expect(await getText(page, '#app p.sub-child')).toMatch('こんにちは！')
+    })
+
+    test('change locale', async () => {
+      await page.selectOption('#app select', 'en')
+      expect(await getText(page, '#app p.parent')).toMatch('hello world!')
+      expect(await getText(page, '#app p.child')).toMatch('Hi !')
+      expect(await getText(page, '#app p.sub-child')).toMatch('Hi !')
+
+      await page.selectOption('#app div.sub-child select', 'ja')
+      expect(await getText(page, '#app p.parent')).toMatch('こんにちは、世界！')
+      expect(await getText(page, '#app p.child')).toMatch('こんにちは！')
+      expect(await getText(page, '#app p.sub-child')).toMatch('こんにちは！')
+    })
+  })
+})