In daily work and JavaScript development, especially in Vue JS project, testing is very important. Combined with the example given by Vue.js on the official website, it can be summarized as follows: use Mocha & karma, and combine with the official recommendation of Vue. vue-test-utils Go to unit test.

import Vue from 'vue' // Import Vue for generating Vue instances
import Hello from '@/components/Hello' // Import components
// The test script should include one or more description blocks, called test suite.
describe('Hello.vue', () => {
  // Each description block should include one or more it blocks, which are called test case s.
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello) // Get the Hello component instance
    const vm = new Constructor().$mount() // Hang components on DOM
    //Assertion: the text content of h1 element in the element whose class is hello in DOM is Welcome to Your Vue.js App
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')  
  })
})

Knowledge points to know
1. Test scripts should be placed in the test/unit/specs / directory.
2. The script is named by [component name]. spec.js
3. The so-called assertion is to perform some operations on components and predict the results. If the test result is the same as the assertion, the test passes
4. All files except main.js in the default test src directory of unit test can be modified in the test/unit/index.js file.
5. In the Chai assertion library, to be be is that which and has have with at of same are meaningless, just easy to understand
6. The test script is composed of multiple describe s, each of which is composed of multiple it's.
7. Understand asynchronous test

it('Asynchronous request should return an object', done => {
    request
    .get('https://api.github.com')
    .end(function(err, res){
      expect(res).to.be.an('object');
      done();
    });
});

8. Learn about the hook (life cycle) of describe

describe('hooks', function() {

  before(function() {
    // Execute before all test cases in this block
  });

  after(function() {
    // Execute after all test cases in this block
  });

  beforeEach(function() {
    // Execute before each test case in this block
  });

  afterEach(function() {
    // Execute after each test case in this block
  });

  // test cases
});

Hello.vue

<template>
  <div class="hello">
    <h1 class="hello-title">{{ msg }}</h1>
    <h2 class="hello-content">{{ content }}</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  props: {
    content: String
  },
  data () {
    return {
      msg: 'Welcome!'
    }
  }
}
</script>

Hello.spec.js

import { destroyVM, createTest } from '../util'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  let vm

  afterEach(() => {
    destroyVM(vm)
  })

  it('Test get element content', () => {
    vm = createTest(Hello, { content: 'Hello World' }, true)
    expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Welcome!')
    expect(vm.$el.querySelector('.hello h2').textContent).to.have.be.equal('Hello World')
  })

  it('Test acquisition Vue Data in object', () => {
    vm = createTest(Hello, { content: 'Hello World' }, true)
    expect(vm.msg).to.equal('Welcome!')
    // Chai's language chain is meaningless and can be written at will. As follows:
    expect(vm.content).which.have.to.be.that.equal('Hello World') 
  })

  it('Test acquisition DOM Is there a class', () => {
    vm = createTest(Hello, { content: 'Hello World' }, true)
    expect(vm.$el.classList.contains('hello')).to.be.true
    const title = vm.$el.querySelector('.hello h1')
    expect(title.classList.contains('hello-title')).to.be.true
    const content = vm.$el.querySelector('.hello-content')
    expect(content.classList.contains('hello-content')).to.be.true
  })
})

Output result

Hello.vue
  √ Test get element content
  √ Test acquisition Vue Data in object
  √ Test acquisition DOM Is there a class