Webpack Encore - Vuejs Testing Mocha

Question

Я собираюсь написать модульные тесты в моем проекте Symfony, который использует Vuejs для внешнего интерфейса. Я хочу использовать среду Mocha в качестве тестового прогона для тестов моих компонентов. Итак, я настроил и установил все, следуя этому руководству: тестирование приложений vuejs

Но есть проблема, в моем проекте я использую 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

Я решаю проблему, используя Карму. Для тех, у кого есть такая же проблема, вы должны следовать этому руководству: 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');