Introduction
In this post, we'll introduce Vitest for blazing-fast unit tests in your Nuxt 3 project.
Testing
Unit tests are important for ensuring that your code is working correctly.
This is especially important when making changes to your code, as you can ensure that you haven't introduced any new bugs or problems to existing features. Or, at least to the extent that these features have been covered by tests.
Vitest
Vitest is a test runner based on Vite, an alternative module bundler to webpack which Nuxt 3 uses by default.
It's incredibly similar to Jest, and often considered a drop-in replacement for it.
Installation
Packages
Install the following dependencies:
# Vitest
yarn add --dev vitest jsdom @vitejs/plugin-vue
# Test utils
yarn add --dev @vue/test-utils @nuxt/test-utils
Configuration
Create your Vitest configuration file (vitest.config.js
):
// vitest.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
test: {
globals: true,
environment: 'jsdom',
},
})
ESLint integration
If you're using ESLint from earlier in the series, you should also add its Vitest plugin:
yarn add --dev eslint-plugin-vitest
Then, modify your .eslintrc.cjs
file to add the plugin:
// .eslintrc.cjs
module.exports = {
// ...
plugins: ['vitest'],
// ...
}
Scripts
Add the following script to your project:
// package.json
{
// ...
"scripts": {
// ...
"test": "vitest"
// ...
}
// ...
}
Usage
Creating tests
At this point, you should use a learning resource such as Testing with Vitest to get started.
A test may look something like this:
// tests/HelloWorld.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from '../components/HelloWorld.vue'
describe('HelloWorld', () => {
it('is a Vue instance', () => {
const wrapper = mount(HelloWorld)
expect(wrapper.vm).toBeTruthy()
})
})
Running tests
To run your unit tests, use yarn test
.
$ yarn test
>>> yarn run v1.22.5
>>> $ vitest
>>>
>>> DEV v0.26.3 ~/Documents/GitHub/nuxt-app
>>>
>>> ✓ tests/HelloWorld.spec.ts (1)
>>>
>>> Test Files 1 passed (1)
>>> Tests 1 passed (1)
>>> Start at 23:19:54
>>> Duration 1.78s (transform 538ms, setup 1ms, collect 154ms, tests 20ms)
>>>
>>>
>>> PASS Waiting for file changes...
>>> press h to show help, press q to quit
All done!
Now you can start shipping new features in peace 😉
Hey, guys! Thank you for reading. I hope that you enjoyed this.
Keep up to date with me:
- Website: https://lloyd.cx/
- Twitter: https://twitter.com/lloydtao/
- GitHub: https://github.com/lloydtao/
- LinkedIn: https://www.linkedin.com/in/lloydtao/
Top comments (3)
Hi, just want to suggest a small optimization.
in your vitest.config.js file, you should import defineConfig from vitest, and not vite. If you import from vite, you will have to specifically install vite as dependency, when it is available from default in nuxt 3
Sorry. But your testing component lacks imports and that's the biggest pitfall in testing Nuxt 3 project
this Nuxt plugin called nuxt-vitest intend to solve that pitfall, works for me at the time of this writings. Take not that it is still under heavy developments.