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，那么我该怎么做呢？

- Mintendo

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');

- Mintendo