What are unit tests

Unit testing allows you to test code in isolation from individual units, providing developers with confidence in their code. By writing thoughtful and meaningful tests, you can be confident that you can keep your application functional and stable while building new features or refactoring existing code.

What does vUE unit testing do?

• Vue (vue you have to know)

• Jest (JEST testing framework does not seek mastery, have to be able to point it)

Vue test environment setup

• Create a VUE (version 2.x is used here) application

• Add the Test framework (if unit Test is already installed when you create the project, skip this step)

  vue add unit-jest 
  The tests folder will be created in the root directory of the project, where all the unit test code will be stored. The file extension is.spec.js. These files are executed after NPM run test:unit

Copy the code

After setting up the environment, you can happily do vUE unit testing; Here is a brief introduction to unit testing in a VUE application using a TodoList application.

example

Testing capabilities

• Data Data type

• Add data

• Delete the data

• Query data

HTML structure

Appearance is so cough up, ugly is ugly, can use line, will do, turn off the light what all same kind.

Js logic code

export default {
  data:() = >({
    text:' '.list: [32]}),created() {
    this.getList()
  },
  methods: {async getList(){
      let data = await axios.get('http://192.168.22.36:3000/unit')
      this.list = [...this.list,...data.data.list]
    },
    addList(){
      this.list.push(this.text || 'hahaha')
      this.text = ' '
    },
    del(item){
     this.list = this.list.filter(list= >list.id ! == item.id) } } }Copy the code

The test case

Create an xxx.spec.js file under tests/ Unit

Data Tests data types

import Todo from '@/components/Todo.vue'

describe('the data instance'.() = > {
  it('text'.() = > {
    expect(typeof Todo.data().text).toBe('string');
  });
  it('list '.() = > {
    expect(Array.isArray(Todo.data().list)).toBeTruthy();
  });
});

Copy the code

Add data

import { shallowMount } from '@vue/test-utils'
describe('add'.() = > {
  it('Add data'.() = > {
    const warp = shallowMount(Todo);
    warp.find('.add').trigger('click').then(() = >{
      expect(warp.vm.list.length).toBeGreaterThan(Todo.data().list.length);
    });
  });
});
Copy the code

Delete the data

describe('delete'.() = > {
  it('Delete data'.() = > {
    const warp = shallowMount(Todo);
    warp.find('.del').trigger('click').then(() = >{
      expect(warp.vm.list.length).toBeLessThan(Todo.data().list.length);
    });
  });
});

Copy the code

Query data

describe('check'.() = > {
  it('Query data'.async() = > {const warp = shallowMount(Todo);
    await warp.vm.getList()
    expect(warp.vm.list.length).toBeGreaterThan(Todo.data().list.length);
  });
});
Copy the code

Here I test the operation directly, because I can be sure that the interface will always have data, so the length of the list after it must be larger than the initial length; But sometimes you do not know whether the interface has data back, then we do this test is not very reasonable, but we can directly verify the interface is successful, if successful, it proves that the query is successful.

describe('Check interface'.() = > {
  it('Check interface'.async() = > {let { data } = await Axios.get('http://192.168.22.36:3000/unit')
    expect(data.code).toBe(0)}); });Copy the code

The complete code

import { shallowMount } from '@vue/test-utils'
import Todo from '@/components/Todo.vue'
import Axios from 'axios'

describe('the data instance'.() = > {
  it('text'.() = > {
    expect(typeof Todo.data().text).toBe('string');
  });
  it('list '.() = > {
    expect(Array.isArray(Todo.data().list)).toBeTruthy();
  });
});

describe('add'.() = > {
 it('Add data'.() = > {
  const warp = shallowMount(Todo);
  warp.find('.add').trigger('click').then(() = >{
    expect(warp.vm.list.length).toBeGreaterThan(Todo.data().list.length);
  });
 });
});

describe('delete'.() = > {
  it('Delete data'.() = > {
    const warp = shallowMount(Todo);
    warp.find('.del').trigger('click').then(() = >{
      expect(warp.vm.list.length).toBeLessThan(Todo.data().list.length);
    });
  });
});

describe('check'.() = > {
  it('Query data'.async() = > {const warp = shallowMount(Todo);
    await warp.vm.getList()
    expect(warp.vm.list.length).toBeGreaterThan(Todo.data().list.length);
  });
});

describe('Check interface'.() = > {
  it('Check interface'.async() = > {let { data } = await Axios.get('http://192.168.22.36:3000/unit')
    expect(data.code).toBe(0)}); });Copy the code

The execution result

npm run test:unit
	
Copy the code

Test coverage

First go to jest.config.js and write the following configuration

module.exports = {
  preset: '@vue/cli-plugin-unit-jest'.collectCoverage:true.collectCoverageFrom: ['src/components/*.vue'] // I only test vue files in the components directory
}

Copy the code

The resources

• Vue website

• Jest’s official website

Dog’s life

The literary talent level is limited, the technique also dish, everybody eldest brother makes do with look, have wrong, welcome to point out.