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