Skip to content

Commit bde087e

Browse files
laruisslaruiss
committed
feat: ✨ configure vitest et cypress pour nuxt3
- met à jour toutes les dépendances - configure vitest - configure cypress pour les tests E2E
1 parent 517ce50 commit bde087e

30 files changed

+308
-946
lines changed

‎template-nuxt3-ts/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,30 @@ Prévisualisation du code de prod (nécessite un build préalable) :
3131
npm run preview
3232
```
3333

34+
## Lancer les tests avec vitest
35+
36+
Vitest est déjà configuré pour vos tests.
37+
38+
Pour les lancer :
39+
40+
```bash
41+
npm run test:unit
42+
```
43+
44+
## Lancer les tests de bout-en-bout avec Cypress
45+
46+
Cypress est déjà configuré pour vos tests de bout-en-bout (end-to-end).
47+
48+
Pour les lancer avec l’interface :
49+
50+
```bash
51+
npm run test:e2e
52+
```
53+
54+
Pour les lancer sans l’interface (dans la CI) :
55+
56+
```bash
57+
npm run test:e2e:ci
58+
```
59+
3460
Regarder ensuite la [documentation de Nuxt concernant le déploiement](https://nuxt.com/docs/getting-started/deployment).

‎template-nuxt3-ts/cypress.config.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// cypress.config.ts
2+
import { defineConfig } from 'cypress'
3+
import { loadNuxt, buildNuxt } from '@nuxt/kit'
4+
import type { InlineConfig } from 'vite'
5+
6+
async function getNuxtViteConfig () {
7+
const nuxt = await loadNuxt({
8+
cwd: process.cwd(),
9+
dev: false,
10+
overrides: {
11+
ssr: false,
12+
},
13+
})
14+
return new Promise<InlineConfig>((resolve, reject) => {
15+
nuxt.hook('vite:extendConfig', (config) => {
16+
resolve(config)
17+
throw new Error('_stop_')
18+
})
19+
buildNuxt(nuxt).catch((err) => {
20+
if (!err.toString().includes('_stop_')) {
21+
reject(err)
22+
}
23+
})
24+
}).finally(() => nuxt.close())
25+
}
26+
27+
export default defineConfig({
28+
// ...
29+
component: {
30+
devServer: {
31+
framework: 'vue',
32+
bundler: 'vite',
33+
async viteConfig () {
34+
const config = await getNuxtViteConfig()
35+
36+
config.plugins = config?.plugins?.filter(
37+
// @ts-ignore
38+
item => !['replace', 'vite-plugin-eslint'].includes(item.name),
39+
)
40+
41+
if (config.server) {
42+
config.server.middlewareMode = false
43+
}
44+
45+
return config
46+
},
47+
},
48+
},
49+
50+
e2e: {
51+
supportFolder: 'cypress/support',
52+
fixturesFolder: 'cypress/fixtures',
53+
setupNodeEvents (on, config) {
54+
// implement node event listeners here
55+
},
56+
},
57+
})

‎template-nuxt3-ts/cypress/e2e/home.cy.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
describe('Homepage', () => {
2+
it('shows homepage', () => {
3+
cy.visit('http://localhost:3000/')
4+
})
5+
})

‎template-nuxt3-ts/cypress/fixtures/example.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "hello@cypress.io",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎template-nuxt3-ts/cypress/support/commands.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************
3+
// This example commands.ts shows you how to
4+
// create various custom commands and overwrite
5+
// existing commands.
6+
//
7+
// For more comprehensive examples of custom
8+
// commands please read more here:
9+
// https://on.cypress.io/custom-commands
10+
// ***********************************************
11+
//
12+
//
13+
// -- This is a parent command --
14+
// Cypress.Commands.add('login', (email, password) => { ... })
15+
//
16+
//
17+
// -- This is a child command --
18+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19+
//
20+
//
21+
// -- This is a dual command --
22+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23+
//
24+
//
25+
// -- This will overwrite an existing command --
26+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27+
//
28+
// declare global {
29+
// namespace Cypress {
30+
// interface Chainable {
31+
// login(email: string, password: string): Chainable<void>
32+
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33+
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34+
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35+
// }
36+
// }
37+
// }

‎template-nuxt3-ts/cypress/support/e2e.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/e2e.ts is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎template-nuxt3-ts/nuxt.config.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { defineNuxtConfig } from 'nuxt/config'
2-
31
// https://nuxt.com/docs/api/configuration/nuxt-config
42
export default defineNuxtConfig({
5-
buildModules: ['@nuxt/typescript-build'],
3+
devtools: { enabled: true },
4+
modules: [
5+
'nuxt-vitest',
6+
],
67
css: [
78
'@gouvfr/dsfr/dist/dsfr.min.css',
89
'@gouvfr/dsfr/dist/utility/icons/icons.min.css',

‎template-nuxt3-ts/package.json‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,51 @@
11
{
22
"name": "vue-dsfr-nuxt-ts-starter",
33
"version": "0.0.0",
4+
"type": "module",
45
"scripts": {
56
"build": "nuxt build",
67
"dev": "nuxt dev",
78
"format": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
89
"generate": "nuxt generate",
910
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
1011
"preview": "nuxt preview",
12+
"test:unit": "vitest run",
13+
"test:e2e": "cypress open --e2e",
14+
"test:e2e:ci": "cypress run --e2e",
1115
"postinstall": "nuxt prepare"
1216
},
1317
"dependencies": {
1418
"@gouvfr/dsfr": "1.10.1",
15-
"@gouvminint/vue-dsfr": "^4.6.0",
16-
"focus-trap": "^7.5.2",
17-
"focus-trap-vue": "^4.0.2"
19+
"@gouvminint/vue-dsfr": "^5.3.1",
20+
"focus-trap": "^7.5.4",
21+
"focus-trap-vue": "^4.0.3"
1822
},
1923
"devDependencies": {
2024
"@nuxt/devtools": "latest",
21-
"@nuxt/test-utils": "^3.7.3",
22-
"@nuxt/types": "^2.17.1",
23-
"@nuxt/typescript-build": "^3.0.1",
2425
"@nuxtjs/eslint-config-typescript": "^12.1.0",
25-
"@rushstack/eslint-patch": "^1.3.3",
26-
"@testing-library/jest-dom": "^6.1.3",
27-
"@testing-library/user-event": "^14.4.3",
28-
"@testing-library/vue": "^7.0.0",
29-
"@types/jsdom": "^21.1.2",
30-
"@types/node": "^18.17.15",
31-
"@typescript-eslint/eslint-plugin": "^6.7.0",
32-
"@typescript-eslint/parser": "^6.7.0",
26+
"@rushstack/eslint-patch": "^1.6.0",
27+
"@testing-library/jest-dom": "^6.1.5",
28+
"@testing-library/user-event": "^14.5.1",
29+
"@testing-library/vue": "^8.0.1",
30+
"@types/jsdom": "^21.1.6",
31+
"@types/node": "^18.19.2",
32+
"@typescript-eslint/eslint-plugin": "^6.13.2",
33+
"@typescript-eslint/parser": "^6.13.2",
3334
"@vue/eslint-config-typescript": "^12.0.0",
34-
"@vue/tsconfig": "^0.4.0",
35-
"eslint": "^8.49.0",
36-
"eslint-config-standard-with-typescript": "^39.0.0",
37-
"eslint-plugin-cypress": "^2.14.0",
38-
"eslint-plugin-import": "^2.28.1",
35+
"cypress": "^13.6.1",
36+
"eslint": "^8.55.0",
37+
"eslint-config-standard-with-typescript": "^39.1.1",
38+
"eslint-plugin-cypress": "^2.15.1",
39+
"eslint-plugin-import": "^2.29.0",
40+
"eslint-plugin-n": "^16.3.1",
3941
"eslint-plugin-node": "^11.1.0",
4042
"eslint-plugin-promise": "^6.1.1",
41-
"eslint-plugin-vue": "^9.17.0",
42-
"jsdom": "^22.1.0",
43+
"eslint-plugin-vue": "^9.19.2",
44+
"happy-dom": "^12.10.3",
4345
"npm-run-all": "^4.1.5",
44-
"nuxt": "^3.7.3",
45-
"start-server-and-test": "^2.0.0",
46-
"typescript": "~5.2.2"
46+
"nuxt": "^3.8.2",
47+
"nuxt-vitest": "^0.11.5",
48+
"typescript": "^5.3.2",
49+
"vitest": "^1.0.1"
4750
}
4851
}

‎template-nuxt3-ts/vitest-setup.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// setupTests.ts
2+
import '@testing-library/jest-dom/vitest'
3+
4+
window.matchMedia = function () {
5+
return { matches: false }
6+
}

‎template-nuxt3-ts/vitest.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { fileURLToPath } from 'node:url'
2+
import { defineVitestConfig } from 'nuxt-vitest/config'
3+
4+
export default defineVitestConfig({
5+
test: {
6+
environment: 'happy-dom',
7+
globals: true,
8+
setupFiles: [
9+
fileURLToPath(new URL('./vitest-setup.ts', import.meta.url)),
10+
],
11+
},
12+
// any custom vitest config you require
13+
})

0 commit comments

Comments
 (0)