DEV Community

Jay
Jay

Posted on • Updated on

Headless Testing with Vite + Vue-Test-Utils

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

Alt Text

Getting Started

  • Lets create a folder mkdir vue-testing
  • cd vue-testing then npm 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.js root 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.json file
  "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.json file
    • -w option is to watch your src and test folder, then re-run the test
    • -H option 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)

Collapse
 
jdmr profile image
J. David Mendoza

Hello Jay, does this test an app with vue-router?

Collapse
 
aelbore profile image
Jay

i haven't tried vue-router but if works with @vue/test-utils its possible aria-vue will works with vue-router