Vue 3 + Vite headless unit testing

Testing in Vue

Write lots of tests so people will afraid to delete yout code

Why need test?

Get an error if we break code
Save time (don't need to test manually)
- It speeds up development because you don’t have to test everything manually after every change.
Integrate into build workflow
Improve your code

Different kind of Test

Unit Test
- Fully isolated testing one function
Integration Test
- Test with dependencies

Getting Started

mkdir vue-app
cd vue-app

npm init -y
npm i --save-dev [email protected] @vue/[email protected] vite

Create Vue App

Create src folder

Create ./src/App.vue

<template>
 <div>
   <h1>Hello Vite + Vue 3!</h1>
   <p>Edit ./App.vue to test hot module replacement (HMR).</p>
   <p>
     <span>Count is: <span data-testid="button-counter">{{ count }}</span></span>
     <button @click="count++">increment</button>
   </p>
 </div>
</template>

<script>
export default {
 data: () => ({ count: 0 })
}
</script>

<style scoped>
h1 { 
 color: #4fc08d;
}

h1, p {
 font-family: Arial, Helvetica, sans-serif;
}
</style>

Create ./src/HelloWorld.vue

 <template>
   <p>
     Hello world!
   </p>
 </template>

 <script>
 export default {
 }
 </script>

 <style scoped>
 h1, p {
   font-family: Arial, Helvetica, sans-serif;
 }
 </style>

Create entry file main.js

import {createApp} from 'vue'
import App from './src/App.vue'

createApp(App).mount('#app')

Create html file index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>⚡️ Vite + TDD</title>
   <style>
     body, html {
       font-family: Arial, Helvetica, sans-serif;
     }
   </style>
 </head>
   <body>
     <h1>
       ⚡️ Vite Component Test Starter
     </h1>
     <div id="app"></div>
     <script type="module" src="./main.js"></script>
   </body>
 </html>

Add or Update scripts in package.json
- serve run your vue app into dev mode
```
  "scripts": {
    "serve": "vite"
  },
```

Add unit test your app

Install dependencies

npm i --save-dev @vue/[email protected] aria-vue aria-mocha puppeteer

Add test

create ./test/App.spec.js

import {mount} from '@vue/test-utils'
import App from '../src/App.vue'

describe('App.spec.js', () => {
  it('test button counter increments', async () => {
    const wrapper = mount(App, { attachTo: '#root' })
    const buttonCounterEl = wrapper.findByTestId('button-counter')
    expect(buttonCounterEl.textContent).to.equal('0')
    await wrapper.find('button').trigger('click')
    expect(buttonCounterEl.textContent).to.equal('1')
  })
})

create ./test/HelloWorld.spec.js

import {mount} from '@vue/test-utils'
import HelloWorld from '../src/HelloWorld.vue'

describe('HelloWorld.spec.js', () => {
  it('renders', async () => {
    const wrapper = mount(HelloWorld, { attachTo: '#root' })
    expect(wrapper.html()).to.contain('Hello')
  })
})

create ./test/plugins.js this will execute/run before test or spec files

import { config } from '@vue/test-utils'

const DataTestIdPlugin = (wrapper) => {
  function findByTestId(selector) {
    const dataSelector = `[data-testid='${selector}']`
    const element = wrapper.element.querySelector(dataSelector)
    if (element) {
      return element
    }
    return null
  }
  return {
    findByTestId
  }
}

config.plugins.VueWrapper.install(DataTestIdPlugin)

Add or Update scripts in package.json

  "scripts": {
    "serve": "vite",
    "test": "aria-vue -w -H --script ./test/plugins.js"
  },

Run the test (everytime source or test files change it will run the tests with -w option)

npm test

aelbore/vue-vite-headless-testing.md

Testing in Vue

Why need test?

Different kind of Test

Getting Started

Create Vue App

Add unit test your app