fix(runtime-utils): support options api data, computed + methods

inouetakuya commented 1 month ago

🔗 Linked issue

fixes #961

❓ Type of change

[ ] 📖 Documentation (updates to the documentation or readme)
[x] 🐞 Bug fix (a non-breaking change that fixes an issue)
[ ] 👌 Enhancement (improving an existing functionality)
[ ] ✨ New feature (a non-breaking change that adds functionality)
[ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
[ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

As described in #961, mountSuspended did not support the Options API data, computed, and methods, so we have fixed this to support them.

inouetakuya commented 1 month ago

debug: Comment out supporting options api in renderSuspended

-> Test fails.

$ pnpm prepack && pnpm test:examples
 WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> @nuxt/test-utils@3.14.2 prepack /Users/inouetakuya/src/github.com/inouetakuya/test-utils
> unbuild

ℹ Building test-utils                                                                                                             10:01:58
ℹ Cleaning dist directory: ./dist                                                                                                 10:01:58
  61├─ .nuxt/test/jy8ffo/output/server/chunks/_/error-500.mjs (4.77 kB) (2.02 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/routes/renderer.mjs.map (960 B) (402 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/runtime.mjs (166 kB) (40.5 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/runtime.mjs.map (6.18 kB) (1.04 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/index.mjs (291 B) (193 B gzip)
│   └─ .nuxt/test/jy8ffo/output/server/package.json (600 B) (299 B gzip)
  Listening on http://127.0.0.1:50352
│ [nitro] ✔ You can preview this build using node .nuxt/test/jy8ffo/output/server/index.mjs
│ Σ Total size: 1.69 MB (410 kB gzip)
│ > example-app-vitest-full@ test:happy-dom /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > VITEST_DOM_ENV=happy-dom pnpm test:unit --run
│ > example-app-vitest-full@ test:unit /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > vitest "--run"
│ From custom module!
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ stdout | tests/nuxt/mock-vue-router.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mount-suspended.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-component-1.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.kuya/test-utils/examples/app-playwright/.nuxt/test/5jkthk/analyze/.…
│ stdout | tests/nuxt/routing.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/server.spec.ts:1 › test
  [Desktop Chrome] › basic.test.ts:17:1 › testing
│ stdout | tests/nuxt/mock-indexeddb.spec.tst
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/auto-import.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/auto-import-mock.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/render-suspended.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/auto-import.spec.ts  (3 tests) 9msuetakuya/src/github.com/inouetakuya/test-utils
│  ✓ tests/nuxt/mock-component-1.spec.ts  (1 test) 24msr test --filter example-app-cucumber
│  ✓ tests/nuxt/mock-indexeddb.spec.ts  (1 test) 28ms
│  ✓ tests/nuxt/auto-import-mock.spec.ts  (2 tests) 8ms
│  ✓ tests/nuxt/mock-vue-router.spec.ts  (1 test) 7ms
│  ✓ tests/nuxt/routing.spec.ts  (3 tests) 130ms
│  ✓ tests/nuxt/server.spec.ts  (4 tests) 83msxperimental-vm-modules node_modules/jest/bin/jest.js
│ stderr | tests/nuxt/render-suspended.spec.ts > renderSuspended > should render asyncData and other options api properties within nuxt su…
│ [Vue warn]: Unhandled error during execution of render function
│   at <OptionsApiPage > c.test.ts:17:1 › testing
│   at <RenderHelper> asic.test.ts:3:1 › test
│   at <Anonymous ref="VTU_COMPONENT" > › testing
│   at <VTUROOT>s transformed.
│  ✓ tests/nuxt/mount-suspended.spec.ts  (25 tests | 1 skipped) 172ms
│ stdout | tests/nuxt/mock-component-3.spec.ts-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types
│ <Suspense> is an experimental feature and its API will likely change.ub.com/inouetakuya/test-utils/examples/app-vitest-full
│ stdout | tests/nuxt/injected-value-component.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.m/inouetakuya/test-utils/examples/app-vitest-full
│  ✓ tests/nuxt/mock-component-3.spec.ts  (1 test) 18ms
│  ✓ tests/nuxt/injected-value-component.spec.ts  (1 test) 20ms
│ stdout | tests/nuxt/mount-component.spec.tscom/inouetakuya/test-utils/examples/app-vitest-full
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-1.spec.ts
│ <Suspense> is an experimental feature and its API will likely change./examples/app-vitest
│  ✓ tests/nuxt/mount-component.spec.ts  (1 test) 11ms
│ stdout | tests/nuxt/mock-component-2.spec.tss API will likely change.
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-component-expose-setup-state.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-3.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/mock-nuxt-composable-1.spec.ts  (1 test) 8ms
│  ✓ tests/nuxt/mock-component-expose-setup-state.spec.ts  (1 test) 9ms
│  ✓ tests/nuxt/mock-component-2.spec.ts  (1 test) 38ms
│  ✓ tests/nuxt/mock-nuxt-composable-3.spec.ts  (2 tests) 9ms
│ stdout | tests/nuxt/config.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/config.spec.ts  (1 test) 3ms
│  ✓ tests/unit/index.spec.ts  (1 test) 1ms
│  ✓ pages/index.vue  (1 test) 1ms
│  ❯ tests/nuxt/render-suspended.spec.ts  (12 tests | 1 failed) 5106ms
│    × renderSuspended > should render asyncData and other options api properties within nuxt suspense
│      → Test timed out in 5000ms.
│ If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
│ stdout | tests/nuxt/plugins.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-2.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/plugins.spec.ts  (1 test) 12ms
│  ✓ tests/nuxt/mock-nuxt-composable-2.spec.ts  (1 test) 11ms
│ ⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
│  FAIL  tests/nuxt/render-suspended.spec.ts > renderSuspended > should render asyncData and other options api properties within nuxt susp…
│ Error: Test timed out in 5000ms.
│ If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
│ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
│ ⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
│ TypeError: _ctx.greetingInMethods is not a function
│  ❯ Proxy._sfc_render pages/other/options-api.vue:22:10
│ ⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯
│ Vitest caught 1 unhandled error during the test run.
│ This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
│      20|     </li>
│      21|     <li data-testid="greetingInMethods">
│      22|       {{ greetingInMethods() }}
│        |          ^
│      23|     </li>
│      24|     <li data-testid="returnData1">
│  ❯ Proxy.clonedComponent.render ../../dist/runtime-utils/index.mjs:264:39
│  ❯ renderComponentRoot ../../node_modules/.pnpm/@vue+runtime-core@3.5.6/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6365:16
│  ❯ ReactiveEffect.componentUpdateFn [as fn] ../../node_modules/.pnpm/@vue+runtime-core@3.5.6/node_modules/@vue/runtime-core/dist/runtime…
│  ❯ ReactiveEffect.run ../../node_modules/.pnpm/@vue+reactivity@3.5.6/node_modules/@vue/reactivity/dist/reactivity.cjs.js:226:19
│  ❯ setupRenderEffect ../../node_modules/.pnpm/@vue+runtime-core@3.5.6/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5322:5
│  ❯ ../../node_modules/.pnpm/@vue+runtime-core@3.5.6/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7064:9
│ This error originated in "tests/nuxt/render-suspended.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, b…
│ The latest test that might've caused the error is "should render asyncData and other options api properties within nuxt suspense". It mi…
│ - The error was thrown, while Vitest was running this test.
│ - If the error occurred after the test had been completed, this was the last documented test before it was thrown.
│ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
│  Test Files  1 failed | 20 passed (21)
│       Tests  1 failed | 63 passed | 1 todo (65)
│      Errors  1 error
│    Start at  10:02:06
│    Duration  9.67s (transform 2.75s, setup 44.53s, collect 4.03s, tests 5.70s, environment 7.50s, prepare 8.42s)
│  ELIFECYCLE  Command failed with exit code 1.
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 13.3s at /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
examples/app-vitest test$ vitest run
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest
│ stdout | test/app.nuxt.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ test/app.nuxt.spec.ts  (1 test) 8ms
└─ Running...
/Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  example-app-vitest-full@ test: `pnpm test:happy-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types`
Exit status 1
examples/content test$ vitest run
└─ Running...
 ELIFECYCLE  Command failed with exit code 1.

inouetakuya commented 1 month ago

Revert "debug: Comment out supporting options api in renderSuspended"

-> Test succeeds 🆗

$ pnpm prepack && pnpm test:examples
 WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> @nuxt/test-utils@3.14.2 prepack /Users/inouetakuya/src/github.com/inouetakuya/test-utils
> unbuild

ℹ Building test-utils                                                                                                             10:04:02
ℹ Cleaning dist directory: ./dist                                                                                                 10:04:02
✔ Build succeeded for test-utils                                                                                                  10:04:07
[3 lines collapsed]
[10 lines collapsed]pendencies because vite config has changed
│ [nitro] ✔ Nuxt Nitro server built in 1773 ms
│ ℹ Vite client warmed up in 1ms
│ [nuxi] ℹ Dev server event: type="nuxt:internal:dev:ready" port=51194
│ ℹ Vite server warmed up in 676ms
│ PASS test/dev.e2e.spec.ts (23.224 s)
│ Test Suites: 3 passed, 3 total
│ Tests:       6 passed, 6 total
└─ Done in 25s 2 passed, 2 total
│ Time:        23.555 s
│ Ran all test suites.
examples/app-playwright test$ playwright test
[165 lines collapsed]
│   └─ .nuxt/test/ns92by/output/server/package.json (600 B) (299 B gzip)
  [Desktop Chrome] › basic.test.ts:3:1 › test
  [Desktop Chrome] › basic.test.ts:17:1 › testing
    2 passed (14.8s)
│ To open last HTML report run:
│   pnpm exec playwright show-report
└─ Done in 15.2s
examples/app-vitest test$ vitest run
[5 lines collapsed]
│ Listening on http://127.0.0.1:51205
│  ✓ test/server.e2e.spec.ts  (1 test) 13536ms
│  ✓ test/browser.e2e.spec.ts  (1 test) 14582ms
│ Listening on http://127.0.0.1:51217
│  ✓ test/generate.e2e.spec.ts  (1 test) 15428ms
│  ✓ test/dev.e2e.spec.ts  (1 test) 18003ms
│  Test Files  5 passed (5)form 2.03s, setup 41.96s, collect 4.27s, tests 932ms, environment 7.49s, prepare 8.74s)
│       Tests  5 passed (5)@ test:jsdom /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│    Start at  10:04:11
│    Duration  19.37s (transform 778ms, setup 2.01s, collect 2.15s, tests 61.56s, environment 272ms, prepare 982ms)-full
└─ Done in 22.7s
examples/app-vitest-full test$ pnpm test:happy-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types
[65 lines collapsed]
│  Test Files  21 passed (21)
[441 lines collapsed]sed | 1 todo (65)
│ [nuxt] Your project has pages but the <NuxtPage /> component has not been used. You might be using the <RouterView /> component instead,…
│ ✓ tests/nuxt/plugins.spec.ts  (1 test) 5ms
│ Test Files  20 passed (20)
│ Tests  63 passed | 1 todo (64)
│ Start at  10:04:40
│ Duration  6.60s (transform 1.22s, setup 33.35s, collect 1.39s, tests 499ms, environment 4.06s, prepare 6.40s)
│ > example-app-vitest-full@ test:types /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > nuxi prepare && vue-tsc --noEmit
│ From custom module!
│ ✔ Types generated in .nuxt
└─ Done in 43.7sUsers/inouetakuya/src/github.com/inouetakuya/test-utils/examples/content
│ stdout | tests/index.spec.ts
│ <Suspense> is an experimental feature and its API will likely change./examples/app-vitest
│  ✓ tests/index.spec.ts  (1 test) 24ms
│  Test Files  1 passed (1)ntal feature and its API will likely change.
│       Tests  1 passed (1) (1 test) 8ms
│    Start at  10:04:29
│    Duration  2.98s (transform 1.21s, setup 1.54s, collect 343ms, tests 24ms, environment 140ms, prepare 420ms)
└─ Done in 8.7s
examples/i18n test$ vitest runnpm test:unit --run
└─ Running...
examples/module test$ vitest run
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/i18n
│ stdout | test/index.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ test/index.spec.ts  (1 test) 14ms
│  Test Files  1 passed (1)
│       Tests  1 passed (1)
│    Start at  10:04:34
│    Duration  1.17s (transform 442ms, setup 440ms, collect 84ms, tests 14ms, environment 129ms, prepare 317ms)
└─ Done in 4.7s
examples/module test$ vitest run
[2 lines collapsed]
│ Plugin injected by my-module!
│ Listening on http://127.0.0.1:51279
│ Plugin injected by my-module!
│ Listening on http://127.0.0.1:51285
│ Plugin injected by my-module!
│  ✓ test/basic.test.ts  (2 tests) 6250ms
│  Test Files  1 passed (1)
│       Tests  2 passed (2)
│    Start at  10:04:32
│    Duration  6.73s (transform 70ms, setup 0ms, collect 266ms, tests 6.25s, environment 0ms, prepare 51ms)
└─ Done in 7.1s
.                                        |  WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> example-app-cucumber@ test /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-cucumber
> NODE_OPTIONS='--loader ts-node/esm' NODE_ENV=test cucumber-js

(node:6830) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6861) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
Listening on http://127.0.0.1:51371
1 scenario (1 passed)
1 step (1 passed)
0m06.571s (executing steps: 0m00.676s)

inouetakuya commented 1 month ago

@danielroe

Thank you for your review!

https://github.com/nuxt/test-utils/pull/963#pullrequestreview-2346367843

do we need to apply the same fixes to renderSuspended?

Yes, we need.

I added test for renderSuspended.

If there is no fix -> test fails
- https://github.com/nuxt/test-utils/pull/963#issuecomment-2392587796
if there are the fixes -> test succeeds
- https://github.com/nuxt/test-utils/pull/963#issuecomment-2392589896

inouetakuya commented 1 month ago

@danielroe

I actually use this library for work. So I'd like to ask, when do you think the version that merges this pull request will be released? 🙏 🙏 🙏

danielroe commented 1 month ago

released! ✅

inouetakuya commented 1 month ago

Thank you so much!! 🙌

nuxt / test-utils