Symfony安可:因果报应和*。vue组件

我目前正在准备一个新的Symfony应用程序,并希望使用Vue以及TypeScript和Karma进行测试。网页包Encore对设置Vue和TypeScript非常有帮助。 yarn encore dev --watch 等等,效果很好。我唯一的问题是我无法很好地利用业力 *.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);
  });

});

解决方案或想法非常受欢迎。提前感谢!

干杯