DEV Community

Jay
Jay

Posted on • Edited on

Headless Testing with Vite + Vue-Test-Utils

#vue #vite #headless #javascript

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
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • Create ./src/main.js root director 
import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • Update or Add scripts to your package.json file 
  "scripts": {
    "serve": "vite",
    ....
  }
Enter fullscreen mode Exit fullscreen mode
  • Now we can run our application to make sure everything is working. 
npm run serve
Enter fullscreen mode Exit fullscreen mode

Adding Test to your application

  • Install dependencies 
  npm i --save-dev @vue/test-utils@2.0.0-beta.5 aria-vue aria-mocha puppeteer
Enter fullscreen mode Exit fullscreen mode
  • 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')
  })
 })
Enter fullscreen mode Exit fullscreen mode
  • 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"
  },
Enter fullscreen mode Exit fullscreen mode
  • Now we can run our test in headless mode 
npm test
Enter fullscreen mode Exit fullscreen mode

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

Read next

eddieangle profile image

Is React-query out of date? This new favorite makes cross-component requests a breeze!

Eddie Kimpel -

muthuraja_r profile image

Using Guard Clauses Instead of Try-Catch in Async/Await: A Clean Coding Technique for Readable and Maintainable Code 🦄🚀

muthu raja -

goodylili profile image

How to Use the Sui TypeScript SDK

Ukeje Chukwuemeriwo Goodness -

yashjain99 profile image

Build collapsible sidebars using just CSS

Yash Jain -