Getting Started with Front-End Vue Unit Testing

1. Why do we need unit testing?
2. How to write unit tests
3. Testing Tools
4. Getting Started with Jest

Install
Simple Example
Jest Cli
Using the Configuration File
Using Babel
Using Jest in vue-cli
Common Examples

Judge the value is equal
Check for false value
Comparison of numbers
String comparison
Arrays and array-like
abnormal
Only execute the current test

Testing asynchronous code

Callback Function
Promises
Async/Await

Installation and removal

Before and After Test
Test case grouping
Execution Order

Mock Function

Testing mocks
Mock return value
Simulation interface return
Mock function matcher

Vue Test Utils

Testing single-file components

Handling webpack aliases

Mounting Components

Test the HTML rendered by the component

Simulate user actions

Component Events

Component data

Simulate vue instance method

Global plugins

Test watch

Third-party plugins

VI. Conclusion

1. Why do we need unit testing?

Unit testing is used to test the functionality of a module in a project, such as a function, class, component, etc. The functions of unit testing are as follows:

Correctness: You can verify the correctness of the code and make more detailed preparations before going online;
Automation: Test cases can be integrated into code version management to automatically execute unit tests and avoid manual operations every time;
Explanatory: It can provide other developers with references to the documentation of the module under test. Reading the test cases may be more complete than the documentation.
Drive development and guide design: Unit tests written in advance can guide the API design of development and also detect problems in the design in advance;
Ensure refactoring: Test cases can be verified multiple times, which can save a lot of time when regression testing is required.

2. How to write unit tests

Testing Principles

When testing code, only consider the test, not the internal implementation.
The data should simulate reality as much as possible, the closer to reality the better
Take full account of the boundary conditions of the data
Focus on testing key, complex, and core codes
Combining testing and functional development is beneficial to design and code refactoring

Writing steps

Preparation stage: construct parameters, create spy, etc.
Execution phase: execute the tested code with constructed parameters
Assert stage: Compare the actual results with the expected results to determine whether the test is normal
Cleanup phase: clean up the impact of the preparation phase on the external environment, remove the spy created in the preparation phase, etc.

3. Testing Tools

Unit testing tools can be divided into three categories:

Test Runner: can simulate various browser environments, customize test frameworks and assertion libraries, such as Karma.
Test framework: Provides functional modules for unit testing. Common frameworks include Jest, mocha, Jasmine, and QUnit.
Tool libraries: assertion libraries such as assert, should.js, expect.js, chai.js, enzyme rendering library, Istanbul coverage calculation.

Here, we will use Jest as an example. Jest is comprehensive, integrates various tools, and is easy to configure, or even use directly with zero configuration.

4. Getting Started with Jest

The description on Jest's official website is as follows:

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Install

yarn add --dev jest
# or
# npm install -D jest

Simple Example

Starting from the example provided by the official website, test a function that adds two numbers and create a sum.js file:

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Then, create the sum.test.js file:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Add a test task in package.json:
{
  "scripts": {
    "test": "jest"
  }
}

Finally, when you run yarn test or npm run test , Jest will print the following message:

PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

At this point, a basic unit test is completed.

Note: Jest uses JSDOM to simulate a real browser in the Node virtual browser environment. Since DOM is simulated with js, Jest cannot test styles. The Jest test runner automatically sets up JSDOM.

Jest Cli

You can run Jest directly from the command line (assuming jest is already in your PATH, e.g. via yarn global add jest or npm install jest --global ) and specify various useful configuration options for it. like:

jest my-test --notify --config=config.json

The Jest command has the following common parameters:

--coverage means output unit test coverage. The coverage file is in tests/unit/coverage/lcov-report/index.html by default.
--watch monitoring mode, any changes to files related to the test case will re-trigger the unit test.

For more options see Jest CLI Options.

Using the Configuration File

Use the jest command to generate a configuration file:

jest --init

You will have several options to choose from:

√ Would you like to use Typescript for the configuration file? ... no
√ Choose the test environment that will be used for testing » jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... yes
√ Which provider should be used to instrument code for coverage? » babel
√ Automatically clear mock calls and instances between every test? ... yes

Example configuration file (not based on the above selections):

// jest.config.js
const path = require('path')

module.exports = {
    preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
    rootDir: path.resolve(__dirname, './'),
    coverageDirectory: '<rootDir>/tests/unit/coverage',
    collectCoverageFrom: [
        'src/*.{js,ts,vue}',
        'src/directives/*.{js,ts,vue}',
        'src/filters/*.{js,ts,vue}',
        'src/helper/*.{js,ts,vue}',
        'src/views/**/*.{js,ts,vue}',
        'src/services/*.{js,ts,vue}'
    ]
}

Using Babel

yarn add --dev babel-jest @babel/core @babel/preset-env

You can create a babel.config.js file in the root directory of your project to configure Babel compatible with your current Node version:

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

Using Jest in vue-cli

Install the @vue/cli-plugin-unit-jest plugin in your project to use Jest in vue-cli:

vue add unit-jest
# or
# yarn add -D @vue/cli-plugin-unit-jest @types/jest

"scripts": {
    "test:unit": "vue-cli-service test:unit --coverage"
},

@vue/cli-plugin-unit-jest will inject the command test:unit into vue-cli-service, and will recognize the following files by default: <rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) to execute unit tests, i.e. files ending with .spec.(js|jsx|ts|tsx) in the tests/unit directory and all js(x)/ts(x) files in the directory named __tests__.

Common Examples

Judge the value is equal

toBe() checks if two primitive types match exactly:

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

toEqual() checks whether objects are equal:

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

Check for false value

toBeNull only matches null
toBeUndefined only matches undefined
toBeDefined is the opposite of toBeUndefined
toBeTruthy matches any if statement that is true
toBeFalsy matches any if statement that is false

Example:

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test('zero', () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

Comparison of numbers

test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

For comparing floating-point numbers for equality, use toBeCloseTo rather than toEqual, because you don't want the test to depend on a tiny rounding error.

test('Add two floating point numbers', () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3); This will throw an error because floating point numbers have rounding errors expect(value).toBeCloseTo(0.3); // This works });

String comparison

You can use regular expressions to check:

test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

Arrays and array-like

You can check whether an array or iterable contains a specific item using toContain:

const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'milk',
];

test('the shopping list has milk on it', () => {
  expect(shoppingList).toContain('milk');
  expect(new Set(shoppingList)).toContain('milk');
});

abnormal

It can also be used to check whether a function throws an exception:

function compileAndroidCode() {
  throw new Error('you are using the wrong JDK');
}

test('compiling android goes as expected', () => {
  expect(() => compileAndroidCode()).toThrow();
  expect(() => compileAndroidCode()).toThrow(Error);

  // You can also use the exact error message or a regexp
  expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');
  expect(() => compileAndroidCode()).toThrow(/JDK/);
});

For more usage information, refer to the API documentation.

Only execute the current test

You can use the only() method to indicate that only this test is executed, reducing unnecessary repeated tests:

test.only('it is raining', () => {
  expect(inchesOfRain()).toBeGreaterThan(0);
});

test('it is not snowing', () => {
  expect(inchesOfSnow()).toBe(0);
});

Testing asynchronous code

Callback Function

For example, suppose you have a fetchData(callback) function that fetches some data and calls callback(data) when it's done. You expect the returned data to be a string 'peanut butter':

test('the data is peanut butter', done => {
  function callback(data) {
    try {
      expect(data).toBe('peanut butter');
      done();
    } catch (error) {
      done(error);
    }
  }

  fetchData(callback);
});

Done() is used to mark the completion of the test. Without done(), our unit test will end after the test is completed, which is not in line with our expectations, because the callback has not been called and the unit test has not been completed. If the done() function is never called, a timeout error will be reported.

If expect fails to execute, it will throw an error and the following done() will not be executed. If we want to know why the test case failed, we must put the expect in the try and pass the error to the done function in the catch. Otherwise, the console will end up showing a timeout error and failing to display the value we received in expect(data).

Promises

Still using the above example:

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

Don't forget to return the result, so that the test and the function are completed at the same time.
If you expect Promise to be rejected, use the catch method:

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

You can also use the resolves and rejects matchers:

test('the data is peanut butter', () => {
  return expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', () => {
  return expect(fetchData()).rejects.toMatch('error');
});

Async/Await

test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

async/await can also be used in conjunction with resolves()/rejects():

test('the data is peanut butter', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toMatch('error');
});

Installation and removal

Before and After Test

In some cases, we need to do some preparation before starting the test, and then do some cleanup after the test is completed. You can use beforeEach and afterEach.
For example, we need to initialize some city data before each test and clean it up after the test:

beforeEach(() => {
  initializeCityDatabase();
});

afterEach(() => {
  clearCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

Similar methods include beforeAll and afterAll, which are executed once before and after the current spec test file starts and ends.

Test case grouping

By default, before and after blocks are applied to every test in the file. Additionally, tests can be grouped together using describe blocks. When before and after blocks are inside a describe block, they apply only to the tests within that describe block.

// Applies to all tests in this file
beforeEach(() => {
  return initializeCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

describe('matching cities to foods', () => {
  // Applies only to tests in this describe block
  beforeEach(() => {
    return initializeFoodDatabase();
  });

  test('Vienna <3 sausage', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Würstchen')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

Execution Order

Since describe is used for grouping, there are nested scopes. The execution order of each life cycle is as follows:

The before of the outer scope is executed before the inner scope, while the after is the opposite;
At the same level, beforeAll is executed before beforeEach, and after is the opposite;

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));
test('', () => console.log('1 - test'));
describe('Scoped / Nested block', () => {
  beforeAll(() => console.log('2 - beforeAll'));
  afterAll(() => console.log('2 - afterAll'));
  beforeEach(() => console.log('2 - beforeEach'));
  afterEach(() => console.log('2 - afterEach'));
  test('', () => console.log('2 - test'));
});

// 1 - beforeAll
// 1 - beforeEach
// 1 - test
// 1 - afterEach
// 2 - beforeAll
// 1 - beforeEach
// 2 - beforeEach
// 2 - test
// 2 - afterEach
// 1 - afterEach
// 2 - afterAll
// 1 - afterAll

Mock Function

jest.fn() can be used to generate a mock function. Jest can capture the call, this, return value, etc. of this function, which is very useful when testing callback functions.

Testing mocks

Suppose we want to test the internal implementation of the forEach function, which calls a callback function once for each element in the array passed in.

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}

To test this function, we can use a mock function and then check the state of the mock function to ensure that the callback function is called as expected.

const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);

// This mock function is called twice expect(mockCallback.mock.calls.length).toBe(2);

// The first parameter when the function is called for the first time is 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// The first parameter when calling the function for the second time is 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

// The return value of the first function call is 42
expect(mockCallback.mock.results[0].value).toBe(42);

Mock return value

Mock functions can also be used to inject test values into code during testing:

const myMock = jest.fn();
console.log(myMock());
// > undefined

myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true

Simulation interface return

Assume there is a class that gets users from an API. This class uses axios to call the API and returns data, which contains the attributes of all users:

// users.js
import axios from 'axios';

class Users {
  static all() {
    return axios.get('/users.json').then(resp => resp.data);
  }
}

export default Users;

Now, to test this method without actually calling the API (making the test slow and brittle), we can use the jest.mock(...) function to automatically mock the axios module. Once the module is mocked, we can provide a mockResolvedValue to .get which will return fake data for testing.

// users.test.js
import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // or you could use the following depending on your use case:
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
});

Mock function matcher

With the mock function, you can add some custom matchers to the function:

// The mock function was called at least once
expect(mockFunc).toHaveBeenCalled();

// The mock function was called at least once with the specified args
expect(mockFunc).toHaveBeenCalledWith(arg1, arg2);

// The last call to the mock function was called with the specified args
expect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);

// All calls and the name of the mock is written as a snapshot
expect(mockFunc).toMatchSnapshot();

You can also simulate it yourself through the native matcher. The following code is equivalent to the above:
// The mock function was called at least once
expect(mockFunc.mock.calls.length).toBeGreaterThan(0);

// The mock function was called at least once with the specified args
expect(mockFunc.mock.calls).toContainEqual([arg1, arg2]);

// The last call to the mock function was called with the specified args
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
  arg1,
  arg2,
]);

// The first arg of the last call to the mock function was `42`
// (note that there is no sugar helper for this specific of an assertion)
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);

// A snapshot will check that a mock was invoked the same number of times,
// in the same order, with the same arguments.
expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
expect(mockFunc.getMockName()).toBe('a mock name');

Vue Test Utils

The official website introduces Vue Test Utils as follows:

Vue Test Utils is the official unit testing utility library for Vue.js.

The following examples are based on the vue-cli scaffolding, including webpack/babel/vue-loader

Testing single-file components

Vue's single-file components need to be precompiled before they can be run in Node or the browser. We recommend two ways to accomplish this: via a Jest precompiler, or directly using webpack. Here we choose the Jest approach.

yarn add -D jest @vue/test-utils vue-jest

vue-jest currently does not support all features of vue-loader, such as custom blocks and style loading. Additionally, webpack-specific features such as code separation are not supported. To use these unsupported features, you will need to use Mocha instead of Jest to run your tests, and webpack to compile your components.

Handling webpack aliases

By default, vue-cli uses @ as an alias for /src, and Jest also needs to configure it separately:

// jest.config.js

module.exports = {
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
    }
}

Mounting Components

The mounted component is returned to a wrapper, which exposes many convenient methods for encapsulating, traversing, and querying the Vue component instance inside it.

//test.js

// Import the `mount()` method from the test-utils library // and the component you want to test import { mount } from '@vue/test-utils'
import Counter from './counter'

// Now mount the component and you get the wrapper const wrapper = mount(Counter)

// You can access the actual Vue instance via `wrapper.vm` const vm = wrapper.vm

// Log it in the console to review the wrapper in depth // Our exploration of Vue Test Utils begins here console.log(wrapper)

While mounting, you can set various properties of the component:

const wrapper = mount(Counter, {
    localVue,
    data() {
        return {
            bar: 'my-override'
        }
    },
    propsData: {
        msg: 'abc'
    },
    parentComponent: Foo, // Specify the parent component provide: {
        foo() {
            return 'fooValue'
        }
    }
})

Test the HTML rendered by the component

Use the wrapper's related methods to determine whether the HTML rendered by the component meets expectations.

import { mount } from '@vue/test-utils'
import Counter from './counter'

describe('Counter', () => {
  // Now mount the component and you get the wrapper const wrapper = mount(Counter)

  test('renders the correct markup', () => {
    expect(wrapper.html()).toContain('<span class="count">0</span>')
  })

  // Also handy for checking for existing elements test('has a button', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

Simulate user actions

When the user clicks the button, our counter should increment. To simulate this behavior, we first need to locate the button through wrapper.find(), which returns a wrapper for the button element. We can then simulate a click by calling .trigger() on the button wrapper.

it('button click should increment the count', () => {
  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.count).toBe(1)
})

To test whether the text in the counter has been updated, we need to know about nextTick. Any changes that result in manipulation of the DOM should await nextTick before the assertion.

it('button click should increment the count text', async () => {
  expect(wrapper.text()).toContain('0')
  const button = wrapper.find('button')
  await button.trigger('click')
  expect(wrapper.text()).toContain('1')
})

Component Events

Each mounted wrapper will automatically log all events fired by the Vue instance behind it. You can retrieve these event records using the wrapper.emitted() method.

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

/*
`wrapper.emitted()` returns the following object:
{
  foo: [[], [123]]
}
*/

You can then set assertions based on this data:

// Assert that the event has been emitted expect(wrapper.emitted().foo).toBeTruthy()

// Assert the number of events expect(wrapper.emitted().foo.length).toBe(2)

// Assert that the event has valid data expect(wrapper.emitted().foo[1]).toEqual([123])

You can also trigger events on subcomponents:

import { mount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent'
import ChildComponent from '@/components/ChildComponent'

describe('ParentComponent', () => {
  test("displays 'Emitted!' when custom event is emitted", () => {
    const wrapper = mount(ParentComponent)
    wrapper.find(ChildComponent).vm.$emit('custom')
    expect(wrapper.html()).toContain('Emitted!')
  })
})

Component data

You can use setData() or setProps to set the state data of the component:

it('manipulates state', async () => {
  await wrapper.setData({ count: 10 })

  await wrapper.setProps({ foo: 'bar' })
})

Simulate vue instance method

Since setMethods() of Vue Test Utils is about to be deprecated, it is recommended to use jest.spyOn() method to simulate Vue instance methods:

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

describe('MyComponent', () => {
  it('click does something', async () => {
    const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')
    await shallowMount(MyComponent).find('button').trigger('click')
    expect(mockMethod).toHaveBeenCalled()
  })
})

Global plugins

If you need to install a global plugin used by all tests, you can use setupFiles and first specify the setup file in jest.config.js:

// jest.config.js
module.exports = {
    setupFiles: ['<rootDir>/tests/unit/setup.js']
}

Then use it in setup.js:

// setup.js
import Vue from 'vue'

// The following globally registered plugins do not work in jest, and localVue must be used
import ElementUI from 'element-ui'
import VueClipboard from 'vue-clipboard2'

Vue.use(ElementUI)
Vue.use(VueClipboard)

Vue.config.productionTip = false

When you just want to install a global plugin in some tests, you can use localVue, which will create a temporary Vue instance:

import { createLocalVue, mount } from '@vue/test-utils'

// Create an extended `Vue` constructor const localVue = createLocalVue()

// Install the plugin normally localVue.use(MyPlugin)

// Pass `localVue` in the mount options
mount(Component, {
  localVue
})

Test watch

Suppose we have a watcher like this:

watch:
  inputValue(newVal, oldVal) {
    if (newVal.trim().length && newVal !== oldVal) {
      console.log(newVal)
    }
  }
}

Since the watch call is asynchronous and will not be called until the next tick, you can detect whether the watch is effective by detecting whether the method in the watcher is called, using the jest.spyOn() method:

describe('Form.test.js', () => {
  let cmp
  ...

  describe('Watchers - inputValue', () => {
    let spy

    beforeAll(() => {
      spy = jest.spyOn(console, 'log')
    })

    afterEach(() => {
      spy.mockClear()
    })

    it('is not called if value is empty (trimmed)', () => {
    })

    it('is not called if values are the same', () => {
    })

    it('is called with the new value in other cases', () => {
    })
  })
})

it("is called with the new value in other cases", done => {
  cmp.vm.inputValue = "foo";
  cmp.vm.$nextTick(() => {
    expect(spy).toBeCalled();
    done();
  });
});

Third-party plugins

When we use some third-party plug-ins, we generally do not need to care about their internal implementation and do not need to test their components. We can use shallowMount instead of mount to reduce unnecessary rendering:

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

const wrapper = shallowMount(Component)
wrapper.vm // The mounted Vue instance can also find third-party components through findAllComponents:
import { Select } from 'element-ui'
test('When the headquarters is selected, branches and outlets are not displayed', async () => {
    await wrapper.setProps({
        value: {
            clusterType: 'head-quarter-sit',
            branch: '',
            site: ''
        }
    })
    // The headquarters does not display branches and outlets expect(wrapper.findAllComponents(Select)).toHaveLength(1)
})

VI. Conclusion

Unit Testing Theory

Unit testing can continuously verify the correctness of the code, drive development, and play a certain documentation role;
When testing, the data should simulate reality as much as possible, and only consider the test, not the internal code;
Take data boundary conditions into account during testing
Focus on testing key, complex, and core codes
There are the following phases in writing unit tests: preparation phase, execution phase, assertion phase, and cleanup phase;
Unit testing tools can be divided into three categories: test runner, test framework, and tool library.

Jest

The --watch option can monitor the encoding of files and automatically execute unit tests;
To test asynchronous code, you can use the done method or the aync function;
The mock function can capture the call, this, return value, etc. of this function, which is very useful when testing callback functions.

Vue Test Utils

Use the mount method to mount components and customize various vue properties;
The shallowMount method does not render child components, thus speeding up testing;
setupFiles can set up the global environment, such as installing element-ui;
createLocalVue can create a separate vue instance, isolated from the global one;

This concludes this article on the introductory tutorial on front-end Vue unit testing. For more relevant Vue unit testing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: