-
Notifications
You must be signed in to change notification settings - Fork 81
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using Nuxt lifecycle hooks in component causes unit test to timeout #883
Comments
@laura-richer Hello there! I'm here to help you with any issues or questions you have. If you need assistance with bug fixes, answers to technical queries, or want to become a contributor, I'm here for you. To resolve the issue of Nuxt lifecycle hooks causing your unit tests to timeout, you can mock the lifecycle hooks or the asynchronous operations within them. This will prevent the actual delay from occurring during your tests. Here is an example of how you can mock the jest.useFakeTimers();
test('Nuxt plugin test', async () => {
const plugin = require('path/to/your/plugin').default;
// Mock the setTimeout function
jest.spyOn(global, 'setTimeout').mockImplementation((cb) => cb());
await plugin();
// Restore the original setTimeout function
jest.useRealTimers();
}); In this example, For instance, if you have a Nuxt plugin like this: export default defineNuxtPlugin(async (_nuxtApp) => {
await new Promise((resolve) => {
setTimeout(resolve, 1000)
})
return {
provide: {
async: {
didInject: true,
},
},
}
}) You can apply the same mocking strategy to ensure your tests do not timeout due to the Additionally, you can refer to the Nuxt composables tests for more examples of handling asynchronous operations and lifecycle hooks in tests. For example, the describe('useAsyncData', () => {
it('should work at basic level', async () => {
const res = useAsyncData(() => Promise.resolve('test'))
expect(Object.keys(res)).toMatchInlineSnapshot(`
[
"data",
"pending",
"error",
"status",
"execute",
"refresh",
"clear",
]
`)
expect(res instanceof Promise).toBeTruthy()
expect(res.data.value).toBe(undefined)
await res
expect(res.data.value).toBe('test')
})
it('should capture errors', async () => {
const { data, error, status, pending } = await useAsyncData('error-test', () => 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)
})
it('should initialize with error set to null when immediate: false', async () => {
const { error, execute } = useAsyncData(() => Promise.resolve({}), { immediate: false })
expect(error.value).toBe(undefined)
await execute()
expect(error.value).toBe(undefined)
})
}) These examples demonstrate how to handle asynchronous operations and ensure your tests do not timeout [1][2][3]. |
Environment
Reproduction
https://stackblitz.com/edit/github-kd86ew?file=app.nuxt.test.ts
Command:
npm run test
Describe the bug
I am using Nuxt's page:start lifecycle hook to trigger a ref boolean change
When using the lifecycle hook/defining
const nuxtApp = useNuxtApp()
in my component, a unit test that mounts this component times out.This happens regardless of which lifecycle hook is used (page:finish, page:loading:start, app:created).
Results in:
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: