学习Vue Test Utils

钟情TDD很久了，然而从来没有真正使用过，因为我不会写单元测试，尤其是前端UI的单元测试，那是什么鬼？

终于我下定决心要试一试。刚开始找了一本书Testing Vue.js Application，看书觉得好简单，谁知道，仅仅按照书中的例子运行就遇到了问题。我搞不清楚是不是因为高端大气上档次的天朝网络导致我安装依赖包出现了问题进而导致运行失败，还是别的什么原因，cnpm我也试了，总会有这样那样的问题，我只运行到chapter-2，chapter-3总是失败，最终我还是决定先把Testing Vue.js Application这本书放一放，先把Vue Test Utils官网文档过一遍。

先列出涉及到的一些东西，后续可能还需要不出的：

Vue
Vue Test Utils
sinon
expect
vue-jest
babel-jest
jest
babel
Chai
Webpack
yarn

引入jest

接下来先从头开始搭建一个vue项目，然后配置jest

创建webpack-simple项目

vue init webpack-simple simple
cd simple
npm i

安装@vue/test-utils Jest

npm i --save-dev @vue/test-utils jest

设置scripts

// package.json
...
"scripts": {
...
"test": "jest"
...
}
...

添加HelloWorld.vue，并为其添加测试文件HelloWorld.spec.js

// src/HelloWorld.vue
<template>
<div>{{ msg }}</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Hello World!'
			}
		}
	}
</script>

// src/__test__/HelloWorld.spec.js
空

运行npm run test试试，得到了如下错误

FAIL  src/__test__/HelloWorld.spec.js
  ● Test suite failed to run

    Plugin/Preset files are not allowed to export objects, only functions. In D:\zheteng\vuetestdemo\simple2\node_modules\babel-preset-stage-3\lib\index.js

      at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
      at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
          at Array.map (<anonymous>)
      at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
      at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
      at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
      at mergeChainOpts (node_modules/@babel/core/lib/config/config-chain.js:320:26)
      at node_modules/@babel/core/lib/config/config-chain.js:283:7
      at buildRootChain (node_modules/@babel/core/lib/config/config-chain.js:120:22)
      at loadPrivatePartialConfig (node_modules/@babel/core/lib/config/partial.js:85:55)

真心表示看不懂！大体猜测是babel的问题。我就去.babelrc文件中把一些东西注释掉了。其实这其中还有一段事情，打死我也不可能直接去.babelrc中注释掉的，我是对比了Vue Test Utils文档中的例子才做的。
在这里插入图片描述

{
  "presets": [
    ["env", { 
      // "modules": false 
      }]/*,
    "stage-3"*/
  ]
}

再次运行npm run test,错误变了

这是因为测试文件中没有任何东西，补充点东西

describe('HelloWorld.vue', () => {
	it('sanity test', () => {
	
	})
})

成功

测试一下HelloWorld.vue吧

import HelloWorld from '../HelloWorld.vue'
import { mount } from '@vue/test-utils'
describe('HelloWorld.vue', () => {
  it('sanity test', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.vm.msg).toBe('Hello World!')
  })
})

运行npm run test,竟然又报错了
在这里插入图片描述

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files,
ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom
"transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

依然不知道这是什么原因，大概是它不认识import吧，这时候我想起来了babel-jest,然后就安装了，依然是这个错误，崩溃了。
仔细想想，应该是.vue不认识，这时候我想起来了vue-jest.那就死马当活马医吧。
然后还需要配置jest，在package.json或者单独的配置文件都行，我是写在了package.json中，如下

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

npm run test
打完收工

直接运行vue-cli创建的项目中的单元测试

vue init webpack vue-demo

这样会创建一个vue的单页应用，在创建过程中会让我们选择是否单元测试。运行npm run unit就可以运行单元测试。不过可惜不知道是什么原因，硬是报错了
在这里插入图片描述

FAIL  test\unit\specs\HelloWorld.spec.js
  ● Test suite failed to run

    SecurityError: localStorage is not available for opaque origins

      at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
          at Array.forEach (<anonymous>)

说啥子我也不懂这是为什么，就去网上搜，最后有人说把testURL改成http://localhost/就好了。在src/unit/jest.conf.js中添加testURL: 'http://localhost/'就好了，如下

// src/unit/jest.conf.js 这是jest的配置文件
...
testURL: 'http://localhost/'
...

至于为什么这么玩，我暂时还不知道，我还没有对jest进行过了解。后续看看jest的文档应该会清楚吧，立个flag。// TODO: jest文档

按道理说这是用vue的脚手架创建的项目不应该出现这种问题，原因是啥不知道，希望以后我们知道，如果有好心人告诉我就更好了:)

我终于让Testing Vue.js Application的chapter-3的例子跑起来了:)

2019-05-30
我还是没有忍住，又一次尝试运行Testing Vue.js Application第三章的例子——chapter-3.

重新克隆git clone https://github.com/eddyerburgh/vue-hackernews
安装依赖，cnpm i
运行npm run test:unit，得到这个错误localStorage is not available for opaque origins，我依稀记得，我之前从chapter-2切换到chapter-3不是这个错误，我已经凌乱了。不管怎么说了，我知道这个错误怎么解决了，上文书已经说了！
在执行npm run test:unit竟然成功了，无语凝噎

未完待续。。。

nothing_more_than

发布了53 篇原创文章 · 获赞 39 · 访问量 8万+

私信关注

引入jest

直接运行vue-cli创建的项目中的单元测试

我终于让Testing Vue.js Application的chapter-3的例子跑起来了:)

猜你喜欢