单元测试【在vue2中配置jest】

一.首先创建vue项目

1.安装脚手架

 > npm install -g @vue/^Ci

> vue create my-project

2.安装jest

> cd my-project

> npm i -D jest vue-jest babel-jest

> npm i -D vue-test-utils

3.配置jest

"scripts": {
    "test": "jest --coverage"
  }

"jest": {
  "moduleNameMapper": {
    "^vue$": "vue/dist/vue.common.js"
  },
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "transform": {
    "^.+\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\.(vue)$": "<rootDir>/node_modules/vue-jest"
  }
}

4.创建demo

【js】demo:

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

// 创建 sum.test.js
const sum = require('./sum');

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

【vue】demo:

// 创建 app.vue
<template>
  <div id="app">
    <MessageList :messages="messages"/>
  </div>
</template>

<script>
import MessageList from './components/MessageList'

export default {
  name: 'app',
  data: () => ({ messages: ['Hey John', 'Howdy Paco'] }),
  components: {
    MessageList
  }
}
</script>

// 创建 ./components/MessageList.vue
<template>
    <ul>
        <li v-for="message in messages">
            {{ message }}
        </li>
    </ul>
</template>

<script>
export default {
  name: 'list',
  props: ['messages']
}
</script>

// 创建 app.test.js
import Vue from "vue";
import App from "./App";

describe("App.test.js", () => {
  let cmp, vm;

  beforeEach(() => {
    cmp = Vue.extend(App); // Create a copy of the original component
    vm = new cmp({
      data: {
        // Replace data value with this fake data
        messages: ["Cat"]
      }
    }).$mount(); // Instances and mounts the component
  });

  it('equals messages to ["Cat"]', () => {
    expect(vm.messages).toEqual(["Cat"]);
  });
});

5.运行

> npm run test

二.遇到的问题

1.问题：

创建项目，选择vue版本的时候，不能操作

$ vue create my-project
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

1.解决：

先运行以下指令在重新安装

> alias vue='winpty vue.cmd'^C

2.问题：

 ● Test suite failed to run

    ReferenceError: [BABEL] unknown: Unknown option: D:\ZXZ\vue-test\my-project\node_modules\@vue\cli-plugin-babel\preset.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "D:\\ZXZ\\vue-test\\my-project\\node_modules\\@vue\\cli-plugin-babel\\preset.js")

      1 | import Vue from "vue";
    > 2 | import App from "./App";
        | ^
      3 |
      4 | describe("App.test.js", () => {
      5 |   let cmp, vm;

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14

2.解决：

原因在于@vue/cli-plugin-babel 依赖的babel-core为babel-core@^7.0.0-bridge.0，babel7以下的都无法识别

> npm i -D babel-core@^7.0.0-bridge.0 

3.问题：

ReferenceError: document is not defined

      3 |  * **/
      4 | export function updateVersion() {
    > 5 |   const head = document.getElementsByTagName("head")[0];
        |                ^
      6 |   head.addEventListener("DOMNodeInserted", (e) => {
      7 |     const type = e.target.tagName;
      8 |     const url = e.target.src;

3.解决：

"scripts": {
    "test": "jest --env=jsdom --coverage"
  }