Webpack Encore - Vuejs Testing Mocha

user_7334516 0
Viewed 402

I'm going to write unit tests in my Symfony project that uses Vuejs for the front-end. I want to use Mocha framework as test runner for my components' tests. So I have configured and installed all things, following this guide: testing vuejs apps

But there's a problem, in my project I'm using Encore, and now I have some troubles to run tests.

I created the setup.js file in this directory of my root's project:

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

So I have added in my package.json this config:

"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
  },

Now I have a problem, I should add this config in my webpack.config.js file

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

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

}

But I'm using Encore, so how can I do it?

webpack-encore vue.js webpack javascript
1 Answers

I resolve the problem using Karma. For anyone that have the same problem, you should following this guide: https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-karma.html

and then in your karma.conf.js file add these lines at the top:

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