javascript - Webpack Encore - Vuejs 测试 Mocha

Question

我打算在前端使用 Vuejs 的 Symfony 项目中编写单元测试。我想使用 Mocha 框架作为组件测试的测试运行器。所以我已经按照本指南配置并安装了所有东西:testing vuejs apps

但是有一个问题，在我的项目中我使用的是Encore，现在我运行测试时遇到了一些麻烦。

我在根项目的这个目录中创建了 setup.js 文件:

- assets
    - js
        - components
        - test
            - setup.js

所以我在我的 package.json 中添加了这个配置:

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production",
    "compile-translations": "php bin/console bazinga:js-translation:dump public --format=js --merge-domains",
    "compile-routes": "php bin/console fos:js-routing:dump --target=public/js/fos_js_routes.js",
    "assets-install": "php bin/console assets:install --symlink --relative public",
    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config webpack.config.js --require assets/js/test/setup.js assets/js/test/**/*.spec.js"
  },
  "nyc": {
    "include": [
      "assets/js/**/*.(js|vue)"
    ],
    "instrument": false,
    "sourceMap": false
  },

现在我有一个问题，我应该在我的 webpack.config.js 文件中添加这个配置

if (process.env.NODE_ENV === 'test'){

  module.exports.externals = [require('webpack-node-externals')()]
  module.exports.devtool = 'inline-cheap-module-source-map'

}

但是我正在使用 Encore，那我该怎么做呢？

Answer 1

我使用 Karma 解决了这个问题。对于遇到相同问题的任何人，您应该遵循本指南:https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-karma.html

然后在您的 karma.conf.js 文件的顶部添加这些行:

const Encore = require('@symfony/webpack-encore');

// Initialize Encore before requiring the .config file
Encore.configureRuntimeEnvironment('dev-server');

// Retrieve webpack config
const webpackConfig = require('./webpack.config.js');