DEV Community

loading...

Headless Testing with Vite + Vue-Test-Utils

aelbore profile image Jay Updated on ・2 min read

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

Discussion (2)

Collapse
jdmr profile image
J. David Mendoza

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

Collapse
aelbore profile image
Jay Author

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

Forem Open with the Forem app