test: add more useAsyncData + useFetch tests #32585
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
WalkthroughThe changes involve removing the entire test suite for the 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)`**/*.{ts,tsx}`: Follow standard TypeScript conventions and best practices
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md) List of files the instruction was applied to:
`**/*.{ts,tsx,vue}`: Use clear, descriptive variable and function names Add comm...
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md) List of files the instruction was applied to:
`**/*.{test,spec}.{ts,tsx}`: Write unit tests for core functionality using vitest
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md) List of files the instruction was applied to:
🧠 Learnings (2)📓 Common learningstest/nuxt/composables.test.ts (11)⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (3)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
test/nuxt/use-async-data.test.ts (2)
27-39: Improve type safety in helper functionThe type assertion
as [any]defeats TypeScript's type checking. Consider properly typing the function parameters.- function mountWithAsyncData (...args: any[]) { - return new Promise<ReturnType<typeof useAsyncData> & Awaited<ReturnType<typeof mountSuspended<unknown>>>>((resolve) => { + function mountWithAsyncData<T = any> ( + key: string | (() => string), + handler: () => Promise<T>, + options?: Parameters<typeof useAsyncData>[2] + ) { + return new Promise<ReturnType<typeof useAsyncData<T>> & Awaited<ReturnType<typeof mountSuspended<unknown>>>>((resolve) => { let res: ReturnType<typeof useAsyncData & ReturnType<typeof mountSuspended>> const component = defineComponent({ setup () { - res = useAsyncData(...args as [any]) + res = useAsyncData(key, handler, options) return () => h('div', [res.data.value as any]) }, })
1-683: Consider splitting this test file for better maintainabilityThis test file is quite large (683 lines) with 38 test cases. Consider organizing tests into logical groups using
describeblocks or splitting into separate files based on functionality:
- Basic functionality and data fetching
- Error handling and edge cases
- Caching and deduplication
- Reactivity and watchers
- Integration with other composables
This would improve maintainability and make it easier to locate specific tests.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
test/nuxt/composables.test.ts(0 hunks)test/nuxt/use-async-data.test.ts(1 hunks)test/nuxt/use-fetch.test.ts(1 hunks)
💤 Files with no reviewable changes (1)
- test/nuxt/composables.test.ts
🧰 Additional context used
📓 Path-based instructions (3)
`**/*.{ts,tsx}`: Follow standard TypeScript conventions and best practices
**/*.{ts,tsx}: Follow standard TypeScript conventions and best practices
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md)
List of files the instruction was applied to:
test/nuxt/use-fetch.test.tstest/nuxt/use-async-data.test.ts
`**/*.{ts,tsx,vue}`: Use clear, descriptive variable and function names Add comm...
**/*.{ts,tsx,vue}: Use clear, descriptive variable and function names
Add comments only to explain complex logic or non-obvious implementations
Keep functions focused and manageable (generally under 50 lines), and extract complex logic into separate domain-specific files
Remove code that is not used or needed
Use error handling patterns consistently
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md)
List of files the instruction was applied to:
test/nuxt/use-fetch.test.tstest/nuxt/use-async-data.test.ts
`**/*.{test,spec}.{ts,tsx}`: Write unit tests for core functionality using vitest
**/*.{test,spec}.{ts,tsx}: Write unit tests for core functionality using vitest
📄 Source: CodeRabbit Inference Engine (.github/copilot-instructions.md)
List of files the instruction was applied to:
test/nuxt/use-fetch.test.tstest/nuxt/use-async-data.test.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.e2e.{ts,js} : Write end-to-end tests using Playwright and @nuxt/test-utils
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitest
Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.
Learnt from: huang-julien
PR: nuxt/nuxt#29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In `packages/nuxt/src/app/components/nuxt-root.vue`, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:
```js
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : null
```
instead of wrapping the import in a computed property or importing the component unconditionally.
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Remove code that is not used or needed
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Keep functions focused and manageable (generally under 50 lines), and extract complex logic into separate domain-specific files
test/nuxt/use-fetch.test.ts (3)
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitest
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.e2e.{ts,js} : Write end-to-end tests using Playwright and @nuxt/test-utils
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
test/nuxt/use-async-data.test.ts (4)
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitest
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.e2e.{ts,js} : Write end-to-end tests using Playwright and @nuxt/test-utils
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
Learnt from: huang-julien
PR: nuxt/nuxt#29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In `packages/nuxt/src/app/components/nuxt-root.vue`, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:
```js
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : null
```
instead of wrapping the import in a computed property or importing the component unconditionally.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: codeql (actions)
- GitHub Check: build
- GitHub Check: codeql (javascript-typescript)
- GitHub Check: code
🔇 Additional comments (2)
test/nuxt/use-async-data.test.ts (2)
19-683: Excellent comprehensive test coverage!This test suite provides thorough coverage of
useAsyncDatafunctionality including:
- Basic data fetching and lifecycle management
- Error handling and edge cases
- Caching, deduplication, and performance optimizations
- Reactivity with watchers and computed keys
- Memory management and component lifecycle
- SSR hydration scenarios
- Integration with Vue transitions and other composables
The tests are well-structured and cover important scenarios that ensure the composable works correctly in various use cases.
29-29: Fix type annotation syntaxThe type intersection syntax is incorrect. The angle brackets are mismatched.
- return new Promise<ReturnType<typeof useAsyncData> & ReturnType<typeof mountSuspended<unknown>>>((resolve) => { + return new Promise<ReturnType<typeof useAsyncData> & Awaited<ReturnType<typeof mountSuspended<unknown>>>>((resolve) => {⛔ Skipped due to learnings
Learnt from: CR PR: nuxt/nuxt#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-06-30T13:48:28.134Z Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitestLearnt from: CR PR: nuxt/nuxt#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-06-30T13:48:28.134Z Learning: Applies to **/*.e2e.{ts,js} : Write end-to-end tests using Playwright and @nuxt/test-utilsLearnt from: CR PR: nuxt/nuxt#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-06-30T13:48:28.134Z Learning: Applies to **/*.{ts,tsx,vue} : Use error handling patterns consistentlyLearnt from: CR PR: nuxt/nuxt#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-06-30T13:48:28.134Z Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue componentsLearnt from: huang-julien PR: nuxt/nuxt#29366 File: packages/nuxt/src/app/components/nuxt-root.vue:16-19 Timestamp: 2024-12-12T12:36:34.871Z Learning: In `packages/nuxt/src/app/components/nuxt-root.vue`, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like: ```js const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : null ``` instead of wrapping the import in a computed property or importing the component unconditionally.Learnt from: CR PR: nuxt/nuxt#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-06-30T13:48:28.134Z Learning: Applies to **/*.{ts,tsx} : Follow standard TypeScript conventions and best practices
test/nuxt/use-async-data.test.ts
Outdated
Comment on lines
72
to
93
| it('should capture errors', async () => { | ||
| const warn = vi.spyOn(console, 'warn').mockImplementation(() => {}) | ||
|
|
||
| const { data, error, status, pending } = await useAsyncData(uniqueKey, () => Promise.reject(new Error('test')), { default: () => 'default' }) | ||
| expect(data.value).toMatchInlineSnapshot('"default"') | ||
| expect(error.value).toMatchInlineSnapshot('[Error: test]') | ||
| expect(status.value).toBe('error') | ||
| expect(pending.value).toBe(false) | ||
| expect(useNuxtApp().payload._errors[uniqueKey]).toMatchInlineSnapshot('[Error: test]') | ||
|
|
||
| const { data: syncedData, error: syncedError, status: syncedStatus, pending: syncedPending } = await useAsyncData(uniqueKey, () => ({} as any), { immediate: false }) | ||
|
|
||
| expect(syncedData.value).toBe(data.value) | ||
| expect(syncedError.value).toBe(error.value) | ||
| expect(syncedStatus.value).toBe(status.value) | ||
| expect(syncedPending.value).toBe(false) | ||
|
|
||
| expect(warn).toHaveBeenCalledWith(expect.stringMatching( | ||
| /\[nuxt\] \[useAsyncData\] Incompatible options detected for "[^"]+" \(used at .*:\d+:\d+\):\n- different handler\n- different `default` value\nYou can use a different key or move the call to a composable to ensure the options are shared across calls./, | ||
| )) | ||
| warn.mockClear() | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Restore console.warn mock properly
The test mocks console.warn but only clears it without restoring the original implementation, which could affect other tests.
it('should capture errors', async () => {
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+ try {
const { data, error, status, pending } = await useAsyncData(uniqueKey, () => Promise.reject(new Error('test')), { default: () => 'default' })
// ... rest of test
expect(warn).toHaveBeenCalledWith(expect.stringMatching(
/\[nuxt\] \[useAsyncData\] Incompatible options detected for "[^"]+" \(used at .*:\d+:\d+\):\n- different handler\n- different `default` value\nYou can use a different key or move the call to a composable to ensure the options are shared across calls./,
))
- warn.mockClear()
+ } finally {
+ warn.mockRestore()
+ }
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| it('should capture errors', async () => { | |
| const warn = vi.spyOn(console, 'warn').mockImplementation(() => {}) | |
| const { data, error, status, pending } = await useAsyncData(uniqueKey, () => Promise.reject(new Error('test')), { default: () => 'default' }) | |
| expect(data.value).toMatchInlineSnapshot('"default"') | |
| expect(error.value).toMatchInlineSnapshot('[Error: test]') | |
| expect(status.value).toBe('error') | |
| expect(pending.value).toBe(false) | |
| expect(useNuxtApp().payload._errors[uniqueKey]).toMatchInlineSnapshot('[Error: test]') | |
| const { data: syncedData, error: syncedError, status: syncedStatus, pending: syncedPending } = await useAsyncData(uniqueKey, () => ({} as any), { immediate: false }) | |
| expect(syncedData.value).toBe(data.value) | |
| expect(syncedError.value).toBe(error.value) | |
| expect(syncedStatus.value).toBe(status.value) | |
| expect(syncedPending.value).toBe(false) | |
| expect(warn).toHaveBeenCalledWith(expect.stringMatching( | |
| /\[nuxt\] \[useAsyncData\] Incompatible options detected for "[^"]+" \(used at .*:\d+:\d+\):\n- different handler\n- different `default` value\nYou can use a different key or move the call to a composable to ensure the options are shared across calls./, | |
| )) | |
| warn.mockClear() | |
| }) | |
| it('should capture errors', async () => { | |
| const warn = vi.spyOn(console, 'warn').mockImplementation(() => {}) | |
| try { | |
| const { data, error, status, pending } = await useAsyncData(uniqueKey, () => Promise.reject(new Error('test')), { default: () => 'default' }) | |
| expect(data.value).toMatchInlineSnapshot('"default"') | |
| expect(error.value).toMatchInlineSnapshot('[Error: test]') | |
| expect(status.value).toBe('error') | |
| expect(pending.value).toBe(false) | |
| expect(useNuxtApp().payload._errors[uniqueKey]).toMatchInlineSnapshot('[Error: test]') | |
| const { data: syncedData, error: syncedError, status: syncedStatus, pending: syncedPending } = await useAsyncData(uniqueKey, () => ({} as any), { immediate: false }) | |
| expect(syncedData.value).toBe(data.value) | |
| expect(syncedError.value).toBe(error.value) | |
| expect(syncedStatus.value).toBe(status.value) | |
| expect(syncedPending.value).toBe(false) | |
| expect(warn).toHaveBeenCalledWith(expect.stringMatching( | |
| /\[nuxt\] \[useAsyncData\] Incompatible options detected for "[^"]+" \(used at .*:\d+:\d+\):\n- different handler\n- different `default` value\nYou can use a different key or move the call to a composable to ensure the options are shared across calls./, | |
| )) | |
| } finally { | |
| warn.mockRestore() | |
| } | |
| }) |
🤖 Prompt for AI Agents
In test/nuxt/use-async-data.test.ts around lines 72 to 93, the test mocks
console.warn but only clears the mock without restoring the original
console.warn implementation. To fix this, after the test assertions, call the
mock's restore method to properly restore console.warn to its original state,
preventing side effects on other tests.
CodSpeed Performance ReportMerging #32585 will not alter performanceComparing Summary
|
Merged
danielroe
added a commit
that referenced
this pull request
Jul 13, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
📚 Description