时间戳

首页 > 解决方案 > Webpack Encore - Vuejs 测试 Mocha

javascript - Webpack Encore - Vuejs 测试 Mocha

问题描述

我将在我的 Symfony 项目中编写单元测试，该项目使用 Vuejs 作为前端。我想使用 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，那我该怎么做呢？

标签： javascriptvue.jswebpackwebpack-encore

解决方案

我使用 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');

推荐阅读