使用 vue.js 提高 JEST 测试性能

Posted 2023-02-22

【中文标题】使用 vue.js 提高 JEST 测试性能

【英文标题】：Improving JEST testing performance with vue.js

【发布时间】：2018-10-17 05:47:37

【问题描述】：

我有一个简单的应用程序，它的组件很少，只有一个 Login.vue 组件测试，调用 jest 需要 20 到 10 秒。有没有办法提高性能或每个人都得到相同的结果。

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'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.js,vue',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]

有覆盖范围

无覆盖

编辑

添加roots 目录似乎可以改善几秒钟的测试。

roots: [
    '<rootDir>/src',
    '<rootDir>/test'
  ],

通过测试/unit/specs/Login.spec.js (5.647s)

登录.vue

✓ has login method (21ms)

【问题讨论】：

您的应用在没有测试的情况下实时加载多长时间？

@Gonzalo.- 不到一秒

如果你的 .babelrc 中有 istanbul 尝试删除它？也许不是速度问题，但它给我带来了覆盖测试的各种问题

@reddiky no istanbul in .babelrc

【参考方案1】：

我也遇到过类似的问题，即开玩笑时间过长。

我做的影响很大的事情是限制测试目录。我没有在 src 文件夹中搜索测试覆盖率，而是通过定义根文件夹来定义单元测试所在的文件夹

"roots": [
  "<rootDir>/test/jest"
]

或

src

  "modulePathIgnorePatterns": [
    "<rootDir>/tmp"
  ],
  "testPathDirs": [
    "<rootDir>/app/client",
    "<rootDir>/lib/client"
  ],

您可以做的另一件事是使用已编译版本的依赖项 ref

我还没有测试过那个，但似乎也应该有帮助

【讨论】：

github.com/jsdf/posts/blob/master/content/… 非常旧的帖子，它不起作用

我收到错误Cannot find module 'jest-cli/src/HasteModuleLoader/HasteModuleLoader'

如果您使用roots，您可以使用modulePaths 选项来定义缺失的路径。或者您可以使用modulePathIgnorePatterns 将模块列入黑名单，但这可能需要更多工作。