Vue+Jest问题汇总

学习开课吧的WEB前端架构，第一天的课程就搞得头大，一个Jest都搞了好几天。感谢强大的度娘了。一共遇到下面的几个问题。除了第一个是自身原因外，后两个真的无语，为什么最新的版本就不能搭配呢。看来开源唯一不好的就是相互关联的不能同时更新版本，你更新了我不更新，对不起，不能合作了。

1. no tests found
   
2. Cannot destructure property 'config'
3. babelJest.getCacheKey is not a function

单元测试
安装依赖
yarn add jest
yarn add vue-jest@5.0.0-alpha.5
yarn add babel-jest
yarn add @vue/compiler-sfc@3.0.2
yarn add @vue/test-utils@next  
yarn add typescript
配置文件
jest.config.js

module.exports = {
    testEnvironment: 'jsdom', // 默认JSdom
    roots: [
        '/src',
        '/packages',
    ], //
    transform: {
        '^.+\\.vue$': 'vue-jest', // vue单?件
        '^.+\\js$': 'babel-jest' // esm最新语法 import
    },
    moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
    testMatch: ['**/__tests__/**/*.spec.js'],
    // 别名
    moduleNameMapper: {
        '^element-ui(.*)$': '$1',
        '^main(.*)$': '/src$1'
    }
}

测试文件 
/packages/button/tests/Button.spec.js

import Button from "../Button.vue";
import { mount } from "@vue/test-utils";

//模拟运行组件
it("content", () => {
  const Comp = {
  template: `<div><Button>默认按钮</Button></div>`,
 };

const wrapper = mount(Comp, {
  global: {
    components: {
      Button,
    },
  },
 });

 //断言
expect(wrapper.findComponent({ name: "ElButton" }).text()).toContain("默认按钮");

});

测试
配置 package.json
"test": "jest --runInBand", # 序列化执?

"scripts": {
    "test": "jest --runInBand"
  },

 运行
npm run jest

错误调试记录
错误 1：no tests found


错误原因
__tests__ 文件夹命名错误，少些了s。

错误 2：Cannot destructure property 'config'


TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined.
      at Object.getCacheKey (node_modules/vue-jest/lib/index.js:10:7)


网上查了类似的错误，说是 jest 的版本问题。

参考



原来用的 

yarn add jest

"jest": "^27.0.4"

重装 jest 

yarn add jest@26.6.3

"jest": "26.6.3" 

错误3：babelJest.getCacheKey is not a function


Test suite failed to run

    TypeError: babelJest.getCacheKey is not a function

错误原因：jest 相关资源 babel-jest 版本也不对

修改

yarn add babel-jest@26.3.0
修改后再测试就好了。


[Vue warn]: Property "$ELEMENT" was accessed during render but is not defined on instance.

 对于单元测试，下图讲解 得不错。