gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
---
|
|
title: "Test Your Module"
|
|
description: "Learn how to test your Nuxt module with unit, integration and E2E tests."
|
|
---
|
|
|
|
Testing helps ensure your module works as expected given various setups. Find in this section how to perform various kinds of tests against your module.
|
|
|
|
## Write Unit Tests
|
|
|
|
::tip
|
|
We're still discussing and exploring how to ease unit and integration testing on Nuxt modules.
|
|
:br :br
|
|
[Check out this RFC to join the conversation](https://github.com/nuxt/nuxt/discussions/18399).
|
|
::
|
|
|
|
## Write E2E Tests
|
|
|
|
[Nuxt Test Utils](/docs/4.x/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
|
|
|
|
1. Create a Nuxt application to be used as a "fixture" inside `test/fixtures/*`
|
|
2. Setup Nuxt with this fixture inside your test file
|
|
3. Interact with the fixture using utilities from `@nuxt/test-utils` (e.g. fetching a page)
|
|
4. Perform checks related to this fixture (e.g. "HTML contains ...")
|
|
5. Repeat
|
|
|
|
In practice, the fixture:
|
|
|
|
```ts [test/fixtures/ssr/nuxt.config.ts]
|
|
// 1. Create a Nuxt application to be used as a "fixture"
|
|
import MyModule from '../../../src/module'
|
|
|
|
export default defineNuxtConfig({
|
|
ssr: true,
|
|
modules: [
|
|
MyModule,
|
|
],
|
|
})
|
|
```
|
|
|
|
And its test:
|
|
|
|
```ts [test/rendering.ts]
|
|
import { describe, expect, it } from 'vitest'
|
|
import { fileURLToPath } from 'node:url'
|
|
import { $fetch, setup } from '@nuxt/test-utils/e2e'
|
|
|
|
describe('ssr', async () => {
|
|
// 2. Setup Nuxt with this fixture inside your test file
|
|
await setup({
|
|
rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
|
|
})
|
|
|
|
it('renders the index page', async () => {
|
|
// 3. Interact with the fixture using utilities from `@nuxt/test-utils`
|
|
const html = await $fetch('/')
|
|
|
|
// 4. Perform checks related to this fixture
|
|
expect(html).toContain('<div>ssr</div>')
|
|
})
|
|
})
|
|
|
|
// 5. Repeat
|
|
describe('csr', async () => { /* ... */ })
|
|
```
|
|
|
|
::tip
|
|
An example of such a workflow is available on [the module starter](https://github.com/nuxt/starter/blob/module/test/basic.test.ts).
|
|
::
|
|
|
|
## Test Manually
|
|
|
|
Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/4.x/guide/modules/getting-started#develop-your-module).
|
|
|
|
You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack/) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
|
|
|
|
After that, you should be able to reference `my-module` like in any regular project.
|