zoukankan      html  css  js  c++  java
  • 解决未安装unit测试和jest的Vue项目运行karma start时的错误

    一、起因

      在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试。但是此项目在利用 vue-cli 创建时并没有安装 unit 测试和 jest 工具,于是造成了karma start 测试运行时的一些错误。本文意在解决主要的错误。

    二、错误论述

    共有两个大错误:
     1、关于mocha关键字未定义的错误 

             Error:describe is not define  

             Error:it is not define

        2、关于 fs 的错误

            Error:Can't resolve ‘fs’ in ‘.......path......’

    三、解决方法

     1、解决mocha关键字未定义的错误

        (1) 猜测错因:

             既然识别不了mocha语法,但是又安装成功了,猜测配置文件出错或者webpack编译时识别不了mocha。

        (2) 调查错误:

             在测试脚本编写 require('mocha'),以便对‘mocha’进行Ctrl+鼠标左键能快速进入它的module index文件。

               

               

           发现此文件后缀名是.ts,表示是一个typescript文件,而非js文件。由于项目中并没有引进typescript,故而编译不了它。需要引进能够编译 ts 文件的工具。

          因为缺失vue的 unit测试工具 和 jest 工具才导致的错误,那么必然是它们已经帮我们做了支持 ts 文件的工作。百度了一下,应该是 jest 的作用,它支持ts。接下来就需要安装 jest相关插件 && 设置配置文件了。

      (3) 解决:

          安装jest 和 babel-jest :     

    #npm install jest --save-dev
    #npm install babel-jest --save-dev
    

       配置文件: 

           在 /test/unit/ 目录下新建三个配置文件【jest.conf.js   setup.js    .eslintrc】,我是直接从之前能正确运行的demo中拷贝过来的:

          ①  /test/unit/jest.conf.js

    const path = require('path')
    
    module.exports = {
      rootDir: path.resolve(__dirname, '../../'),
      moduleFileExtensions: [
        'js',
        'json',
        'vue'
      ],
      moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
      },
      transform: {
        '^.+\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\.(vue)$': '<rootDir>/node_modules/vue-jest'
      },
      testPathIgnorePatterns: [
        '<rootDir>/test/e2e'
      ],
      snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
      setupFiles: ['<rootDir>/test/unit/setup'],
      mapCoverage: true,
      coverageDirectory: '<rootDir>/test/unit/coverage',
      collectCoverageFrom: [
        'src/**/*.{js,vue}',
        '!src/main.js',
        '!src/router/index.js',
        '!**/node_modules/**'
      ]
    }

     

         ②  /test/unit/setup.js

    import Vue from 'vue'
    
    Vue.config.productionTip = false
    

     

         ③  /test/unit/.eslintrc

    {
      "env": { 
        "jest": true
      },
      "globals": { 
      }
    }

     

         目录结构:

          

     (4) 运行karma:

           #karma start

          不再报 Error:describe is not define  错误,但是出现了Error:Can't resolve ‘fs’ in ‘.......path......’错。解决它请继续阅读。

    2、解决fs的错误

         修改webpack的配置文件,增加:

     node: {
         fs: 'empty'
     },
    

        /bulid/webpack.base.conf.js: 

     

       问题解决完了,此时再 karma start就不会报错了,会显示执行成功的消息。

       

       

  • 相关阅读:
    【Java TCP/IP Socket】应用程序协议中消息的成帧与解析(含代码)
    【Java TCP/IP Socket】UDP Socket(含代码)
    【Java TCP/IP Socket】TCP Socket(含代码)
    Java NIO —— Buffer(缓冲区)
    java.nio.ByteBuffer 以及flip,clear及rewind区别
    Java文件IO操作应该抛弃File拥抱Paths和Files
    Java网络编程之InetAddress和URL
    Java enum的用法详解
    PAT Basic 1083 是否存在相等的差 (20 分)
    PAT Basic 1082 射击比赛 (20 分)
  • 原文地址:https://www.cnblogs.com/vae860514/p/8303193.html
Copyright © 2011-2022 走看看