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组件

1 个答案: