vue项目添加单元测试问题记录

一个用cli创建的练手的VUE项目，默认没带单元测试，想添加单元测试功能，遂开始了这一路的折腾，本来就有点儿奇怪用cli创建项目为啥不带单元测试支持。

无谓的弯路

先上网搜了一下，vue添加单元测试，文章也比较多，介绍了要添加那些包，增加那些配置，想到，干脆自己用cli创建一个带单元测试的空项目，把单元测试需要的东西合并进来，肯定比网上的要准确，执行了一下vue提示无效命令，就全局安装了一下vue-cli，后面一通折腾，倒是把需要的包都装上了，但是执行单元测试总是报错，执行不了，后来注意到原项目的package定义和我新创建的空项目的package定义差别还挺大，babel的版本也差一个大版本，最后发现原项目是用@vue/cli创建的，而我创建项目用的是vue-cli，这两个版本改动很大，太长时间没创建项目，都忘了cli早升级了，浪费了不少时间。
又把刚才添加的一堆模块删掉，从头开始。

步入正途

• 添加单元测试

vue add @vue/unit-jest 

报错

 1464 error command failed
1465 error command C:\windows\system32\cmd.exe /d /s /c node-gyp rebuild
1466 error �ڴ˽��������һ������һ����Ŀ����Ҫ���ò������ɣ������ӡ�/m�����ء�
1466 error   deasync.cc
1466 error c:\users\mortalgod\appdata\local\node-gyp\cache\16.3.0\include\node\v8.h(4053): fatal error C1071: ��ע��������������ļ����� [H:\ZG\hunter\ruoyi-ui\node_modules\deasync\build\deasync.vcxproj]
1467 error (node:19748) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
1467 error (Use `node --trace-deprecation ...` to show where the warning was created)
1467 error gyp ERR! build error
1467 error gyp ERR! stack Error: `D:\Apps\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
1467 error gyp ERR! stack     at ChildProcess.onExit (D:\Apps\nvm\v16.3.0\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
1467 error gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
1467 error gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
1467 error gyp ERR! System Windows_NT 10.0.18363
1467 error gyp ERR! command "D:\\Apps\\nodejs\\node.exe" "D:\\Apps\\nvm\\v16.3.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
1467 error gyp ERR! cwd H:\ZG\hunter\ruoyi-ui\node_modules\deasync
1467 error gyp ERR! node -v v16.3.0
1467 error gyp ERR! node-gyp -v v7.1.2
1467 error gyp ERR! not ok
1468 verbose exit 1

最重要的错误信息乱码，一脸懵逼

• 老办法，创建一个空项目，添加单元测试，同样报错
• 单独装deasync试试

npm install deasync

还是不行

• 手动编译deasync
  npm 查看了一下deasync库信息

deasync@0.1.23 | MIT | deps: 2 | versions: 32
https://github.com/abbr/deasync

dist
.tarball: https://registry.nlark.com/deasync/download/deasync-0.1.23.tgz
.shasum: d52bb1f9cebb511933bb977f2820af1af5d1ec08

dependencies:
bindings: ^1.5.0       node-addon-api: ^1.7.1

maintainers:
- abbr <wenfred@gmail.com>

dist-tags:
latest: 0.1.23

published a month ago by abbr <wenfred@gmail.com>

手动下载了deasync模块包，node_mdoules中创建deasync目录，将下载的包解压到deasync目录中，压缩包多了一级package目录，注意不能放错，进入deasync目录，执行

node-gyp rebuild

node-gyp不能识别，又全局安装了node-gyp

npm install node-gyp -g

再次rebuild，报错

在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/m”开关。
  deasync.cc
c:\users\mortalgod\appdata\local\node-gyp\cache\16.3.0\include\node\v8.h(4053): fatal error C1071: 在注释中遇到意外的文 件结束 [E:\wo
rk\test\vue\vue-with-test\node_modules\deasync\build\deasync.vcxproj]
gyp ERR! build error
gyp ERR! stack Error: `D:\Apps\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (D:\Apps\nvm\v16.3.0\node_modules\node-gyp\lib\build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "D:\\Apps\\nodejs\\node.exe" "D:\\Apps\\nodejs\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd E:\work\test\vue\vue-with-test\node_modules\deasync
gyp ERR! node -v v16.3.0
gyp ERR! node-gyp -v v8.3.0
gyp ERR! not ok

终于看到了正确的错误信息

• 查看v8.h文件，确实注释没有封闭，文件的最后为

  /**
 - Sets a native data property like Template::SetNativeDataProperty, but
 - this method sets on this object directly.
   */
  V8_WARN_UNUSED_RESULT Maybe<bool> SetNativeDataProperty(
      Local<Context> context, Local<Name> name,
      AccessorNameGetterCallback getter,
      AccessorNameSetterCallback setter = nullptr,
      Local<Value> data = Local<Value>(), PropertyAttribute attributes = None,
      SideEffectType getter_side_effect_type = SideEffectType::kHasSideEffect,
      SideEffectType setter_side_effect_type = SideEffectType::kHasSideEffect);

  /**
 - Attempts to create a property with the given name which behaves like a data
 - property, except that the provided getter is invoked (and provided with the
 - data value) to supply its value the first time it is read. After the
 - property is access

难道是文件没下载全，删掉node-gyp的cache重新下载试试

• 删掉cache后重新rebuild，成功，查看v8.h，果然是之前没下全
• 再次

vue add @vue/unit-jest

成功