Symfony Encore：Karma 和 *.vue 组件

Question

我目前正在准备一个新的 Symfony 应用程序，并且想使用 Vue 以及 TypeScript 和 Karma 进行测试。 Webpack Encore 对设置 Vue 和 TypeScript 很有帮助。 yarn encore dev --watch 等工作精美。我唯一的问题是我无法让 Karma 很好地处理 *.vue 文件。测试正常的 *.ts 文件完全没有问题。也许其他人遇到过类似的问题并且知道该怎么做。

我的 webpack.config.js 看起来如下：

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

// Export runtime environment, if Encore is not available
var isProduction = true;
try {
  isProduction = Encore.isProduction();
} catch (e) {
  console.log('No Encore environment found, configuring runtime environment');
  Encore.configureRuntimeEnvironment(
    'dev-server',
    {
      https: true,
      keepPublicPath: true,
    }
  );
}

Encore
  // directory where all compiled assets will be stored
  .setOutputPath('web/assets/build/')

  // what's the public path to this directory (relative to your project's document root dir)
  .setPublicPath('/web/assets/build')

  // empty the outputPath dir before each build
  .cleanupOutputBeforeBuild()

  // will output as web/build/app.bundle.js
  .addEntry('app.bundle', './src/assets/scripts/app.ts')

  // allow *.ts and *.vue files to be processed
  .enableTypeScriptLoader(options => {
    options.appendTsSuffixTo = [/\.vue$/];
    options.transpileOnly = true;
  })

  // will transpile Vue.js components
  .enableVueLoader(options => {
    options.loaders.ts = 'ts-loader!tslint-loader'
  })

  // enable tslint loader and show linting errors in the console
  // based on the "tslint-loader/vue-loader/ts-loader"-snippet:
  // https://github.com/palantir/tslint/issues/2099#issuecomment-292524819
  .addLoader({
    test: /\.ts$/,
    loader: 'tslint-loader',
    exclude: /(node_modules)/,
    enforce: 'pre',
    options: { typeCheck: true, configFile: './tslint.json' },
  })

  // will output as web/build/app.styles.css
  .addStyleEntry('app.styles', './src/assets/styles/app.scss')

  // allow sass/scss files to be processed
  .enableSassLoader()

  // Autoprefixer and other postcss plugins, see postcss.config.js
  .enablePostCssLoader(options => {
    options.config = {
      path: 'postcss.config.js',
    };
  })

  // Add source maps for dev
  .enableSourceMaps(!isProduction)
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

和 karma.conf.js 像这样：

var webpackConfig = require('./webpack.config');

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon'],
    files: [
      'src/assets/scripts/**/*.spec.ts',
    ],
    exclude: [],
    preprocessors: {
      'src/assets/scripts/**/*.ts': ['webpack'],
    },
    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
    },
    webpackMiddleware: {
      noInfo: true,
      stats: 'errors-only',
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
  });
};

我已经花了无数小时阅读文档并修复了这个那个。我还使用 Vue CLI 创建了示例项目，但我无法弄清楚此设置有什么问题。以下测试文件运行良好：

import { expect } from 'chai';
import { App } from '../../core/App';


describe('App Core', () => {
  let app: App;

  beforeEach(() => {
    app = new App();
  });

  it('should have a public app name', () => {
    expect(app.name).to.be.a('string');
    expect(app.name).to.be.equal('my test app');
  });

  it('should have a public app version', () => {
    expect(app.version).to.be.a('string');
  });

});

但是这里，HelloWorldComponent是未定义的：

import { expect } from 'chai';
import { VueConstructor } from 'vue';
import HelloWorldComponent from '../../../components/vue/HelloWorld.vue';


describe('HelloWorld.vue', () => {

  it('should be a valid Vue component', () => {
    expect(HelloWorldComponent).to.be.a(VueConstructor);
  });

});

非常非常欢迎提出解决方案或想法。提前致谢！

干杯

Answer 1

感谢所有默默帮助我的人:)我找到了问题，需要一个插件但没有加载：

var webpackConfig = require('./webpack.config');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon'],
    files: [
      'src/assets/scripts/**/*.spec.ts',
    ],
    exclude: [],
    preprocessors: {
      'src/assets/scripts/**/*.ts': ['webpack'],
    },
    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      // This is the relevant bit:
      plugins: [
        new ExtractTextPlugin("app.styles.css") 
      ]
    },
    webpackMiddleware: {
      noInfo: true,
      stats: 'errors-only',
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity,
  });
};

现在很有魅力:)

Symfony Encore：Karma 和 *.vue 组件

Symfony Encore: Karma and *.vue Components

typescript

karma-runner

webpack

vue.js

webpack-encore