Vue 的单元测试入门二、进阶使用

一、 在vue项目中使用

1. 建立一个vue项目。

我这里直接使用了一个uni-app创建的项目。

2. 修改引用

packages.json文件

{
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-plugin-unit-jest": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-jest": "23.6.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "mockjs": "1.0.1-beta3",
    "runjs": "4.3.2",
    "sass": "1.26.8",
    "sass-loader": "8.0.2",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "2.6.10"
  },
  "scripts": {
    "test": "jest --clearCache && vue-cli-service test:unit"
  }
}

有些可能不是必须的，但排查起来挺麻烦的，我就没再筛选了。

二、添加配置文件

1. jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
     // 为 Jest 配置 Babel
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: ['/node_modules/'],
  // 别名
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
};
 

2. 如果没有babel.config.js则创建

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
      
    }
  }
}

三、创建一个待测试的类文件

1. 创建 utils/validate.js

/**
 * Created by PanJiaChen on 16/11/18.
 */
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

2. 创建单元测试脚本 /test/unit/utils/validate.spec.js

import { validUsername, isExternal } from '@/utils/validate.js'

describe('Utils:validate', () => {
  it('validusername', () => {
    expect(validUsername('admin')).toBe(true)
    expect(validUsername('editor')).toBe(true)
    expect(validUsername('xxxx')).toBe(false)
  })

})

最后的目录如下：

四、运行测试命令

1. 批量运行单元测试

npm run test
# 或
jest

2. 运行指定测试用例

# 指定文件
jest -i tests/unit/utils/validate.spec.js
# 正则,这种方式其实用例都还会再运行一遍，然后只显示指定名称的
jest -t Utils:validate
# 如果在it块中有一个describe，则运行
jest -t '<describeString> <itString>'
# 也可以使用node命令运行测试用例
node <path-to-jest> -i <you-test-file> -c <jest-config> -t "<test-block-name>"
# 经常要运行的也可以写到package.json里
"scripts": { "test:math": "jest -i test/my-tests.js -t", }
# 然后使用命令
npm run test:math "math tests"

3. 其它命令

# 运行测试
jest --watch

然后可以再按p 、再输入文件名的正则表达式来运行指定测试名称。
f / x 用来关注或排除测试

五、jest常用断言语法

1. toBe 值精准匹配

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

2. 对象匹配检测

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

3. 空值

• toBeNull ：只匹配null
• toBeUndefined：只匹配undefined
• toBeDefine：与toBeUndefined相反
• toBeTruthy：匹配任何if语句为真
• toBeFalsy：匹配任何if语句为假

4. 数字匹配

• 大于：toBeGreaterThan()
• 大于或者等于：toBeGreaterThanOrEqual()
• 小于：toBeLessThan()
• 小于或等于：toBeLessThanOrEqual()
• toBe和toEqual同样适用于数字，但对比两个浮点数是否相等的时候，使用toBeCloseTo而不是toEqual

5. 字符串

toMatch() 传递正则表达式

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

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

6. 数组包含

 expect(myarray).toContain('myvalue');

7. 抛出异常

expect(myfunc).toThrow(MyError);

8. 测试异步代码

function fetchData(call) {
  setTimeout(() => {
    call('peanut butter1')
  },1000);
}

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

注意这里的done()，Jest会等Done结束才结束测试。

9. 测试Promise

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

10. .resolves/.rejects

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

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

11. Async/Await

test('the data is peanut butter', async () => {
  expect.assertions(1);
  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');
  }
});

六、setup和teardown

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

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

test('my test', () => {
  ...
});

Jest还提供了beforeAll和afterAll，在所有测试用例生效。

参考：
https://juejin.cn/post/6844903638263922701