This paper introduces:


1. Establishment of JEST environment under VUE-CLI3


2. Basic test methods of VUE components

Environment configuration

The plug-in of VUE-CLI3 makes the installation process very simple. Start the visual management system through Vue UI, click “Add plug-in” in the plug-in bar, search @vue/ CLI-plugin-unit-jest, and click install. The corresponding command line is vue add@vue /cli-plugin-unit-jest. This process actually involves both installation and invocation, and installs all dependencies together so that you don’t have to install each dependency one by one.




After the installation is complete, you’ll find these dependencies in the package.json file




In the root directory, you’ll find a test folder with a.spec.js sample file. Run the packgae.json test:unit command to call jest’s tests. The system matches all files with the.spec.js or.test.js suffix and executes the code in the file. The normal result is as follows.












This is basically the end of environment configuration.


Vue single file test case

For a Vue component, the core test metrics should be the props interface. The alert.vue file defines the following props:












My test code is as follows, and the explanation is in the comments: 

import { mount } from '@vue/test-utils' // Create a Wrapper containing the Vue components to be mounted and rendered

import { mount } from '@vue/test-utils' // Create a Wrapper containing the Vue components to be mounted and rendered

import Alert from '@/components/alert/index.vue'; // Import components

describe('Alert', () = > {// Describe represents a scope
  
  it('create', () = > {// 'creat' here is just a custom descriptive text
    const wrapper = mount(Alert, {
      // Mount generates a wrapper that includes a mount component or vnode and methods to test that component or vnode
      propsData: {
        title: 'title'.showIcon: true
      }
      // Can take arguments, here I pass the interface data via propsData
    })
    expect(wrapper.find('.el-alert__title').text()).toEqual('title');
    expect(wrapper.vm.visible).toBe(true);
    //.vm can get the current instance object, which is equivalent to the this object in the vUE component
    // Find () can match various types of selectors, similar to DOM selection, and text() is used to retrieve the contents
    // toEqual is an assertion that if the result is' title ', the test passes, otherwise it fails
  });

  it('type', () = > {const wrapper = mount(Alert, {
      propsData: {
        title: 'title'.showIcon: true.type: 'success'
      }
    })
    expect(wrapper.classes('el-alert--success')).toBe(true);
    // classes() method that returns an array of class names. Or return a Boolean value when the class name is supplied
    // toBe is similar to toEqual except that toBe is more strictly restricted to the same object
  });

  it('description', () = > {const wrapper =  mount(Alert, {
      propsData: {
        title: 'Dorne'.description: 'Unbowed, Unbent, Unbroken'.showIcon: true
      }
    })
    expect(wrapper.find('.el-alert__description').text()).toEqual('Unbowed, Unbent, Unbroken');
  });

  it('title slot', () = > {const wrapper = mount(Alert, {
      propsData: {
        title: 'Dorne'
      },
      slots: {
        title: '<span>foo</span>'}})// Here we add a slot via the slots attribute to determine if the slot content is properly rendered
    expect(wrapper.find('.el-alert__title').text()).toEqual('foo')}); it('close', () = > {const wrapper = mount(Alert, {
      propsData: {
        title: 'test'
      }
    })
    wrapper.find('.el-alert__closebtn').trigger('click')
    expect(wrapper.vm.visible).toBe(true)
    // Trigger () can trigger an event, which simulates a click
  });
});Copy the code

The above test case overrides the Prop and click events of the Alert component, which are the most commonly used parts of vue single-file testing. Run NPM Run Test: Unit to see the effect









The code coverage indicator in the table is disabled by default and needs to be configured in jest. Config.js. 


  "collectCoverage": true."collectCoverageFrom": ["**/*.{js,vue}".! "" **/node_modules/**"]Copy the code



Tests is the number of all Test instances. We have passed all Test instances, so we display passed. If a Test fails, fail will be displayed:





Okay, the above is the simple application of JEST in vUE project. I hope it will be helpful to you.




Jest advanced section

Related documents:
Vue Test Utils
Jest’s official website
Vue-cli3 plug-in part


Recommended articles:
Vue applies unit testing strategies and practices