Vue unit testing

Unit testing is a test code written to test whether a class or a method can work properly.

About Unit Testing

What is it: Unit testing is the testing of correctness for the smallest unit of a program. It is to test a page or a method to test the code unit.

Significance: It can reduce bugs, improve the efficiency and quality of code, quickly locate the location of bugs, reduce debugging time and reconstruct code.

Purpose: When our project is large enough, there may be an impact on previous templates in the process of overlapping modules and components.

Test command: npm run unit

The content of the test file (List.vue):

    <template>
      <div>
        <h1>My To Do List</h1>
        <br/>
        <ul>
          <!-- The red line warning is that this editor does not support this format. -->
          <li v-for="item in listItems">{{ item }}</li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: "list",
      data() {
        return {
          listItems: ["buy food", "play games", "sleep"]
        };
      }
     };
    </script>

Test routing configuration (index.js):

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import List from '@/components/List'
    
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/to-do',
          name: 'ToDo',
          components: List
        },
      ]
    });

Configured test file content (List.spc.js):

    import Vue from 'vue';
    import List from '@/components/List';
    
    describe('List.vue', () => {
      it('displays items from the list', () => {
        // Get component instances in mount
        const Constructor = Vue.extend(List);
        const ListComponent = new Constructor().$mount();
        // Testing for error codes
        // expect(vmComponent.count).toBe(2);
      })
    })

Tags: Front-end Vue npm

Posted on Wed, 09 Oct 2019 17:01:59 -0700 by jeff8j