Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
Vue-Test-Utils is a utilities for testing Vue components
Aria-Vue is a testing tool for Vue components, it can run your test in headless or browser mode
Table Of Contents
Getting Started
- Lets create a folder
mkdir vue-testing -
cd vue-testingthennpm init -y - Install dependencies
npm install vue@3.0.0
npm install vite @vue/compiler-sfc@3.0.0 --save-dev
- Create
./src/App.vue
<template>
<p>
Hello world!
</p>
</template>
<script>
export default { }
</script>
<style scoped>
h1, p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
- Create
./src/main.jsroot director
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- Add
index.html
<!DOCTYPE html>
<html lang="en">
</head>
<body>
<h1>⚡️ Vite Component Test Starter</h1>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
- Update or Add scripts to your
package.jsonfile
"scripts": {
"serve": "vite",
....
}
- Now we can run our application to make sure everything is working.
npm run serve
Adding Test to your application
- Install dependencies
npm i --save-dev @vue/test-utils@2.0.0-beta.5 aria-vue aria-mocha puppeteer
- Let's create test file
./test/App.spec.js
import {mount} from '@vue/test-utils'
import App from '../src/App.vue'
describe('App.spec.js', () => {
it('renders', async () => {
const wrapper = mount(App, { attachTo: '#root' })
expect(wrapper.html()).to.contain('Hello')
})
})
- Update or add scripts to your
package.jsonfile-
-woption is to watch yoursrcandtestfolder, then re-run the test -
-Hoption is to run your test in headless mode
-
"scripts": {
"serve": "vite",
"test": "aria-vue -w -H"
},
- Now we can run our test in headless mode
npm test
Top comments (2)
Hello Jay, does this test an app with vue-router?
i haven't tried vue-router but if works with @vue/test-utils its possible aria-vue will works with vue-router