0
현재 새 Symfony 응용 프로그램을 준비 중이며 Vue와 TypeScript 및 Karma를 테스트 용으로 사용하려고합니다. Webpack Encore는 Vue 및 TypeScript를 설정하는 데 매우 유용했습니다. yarn encore dev --watch 등은 아름답게 작동합니다. 내 유일한 문제는 나는 카르마가 *.vue 파일들과 잘 어울리게 할 수 없다는 것이다. 정상적인 *.ts 파일을 테스트하는 것은 전혀 문제가되지 않습니다. 어쩌면 다른 누군가가 비슷한 문제를 겪고 있고 그것에 대해 무엇을해야 할지를 알고있을 것입니다. 이 같은Symfony Encore : Karma 및 * .vue 구성 요소
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,
});
};
가 이미 문서를 읽고 이것 저것을 고정 수많은 시간을 보냈다 다음과 같이
내 webpack.config.js 보인다. 또한 Vue CLI를 사용하여 샘플 프로젝트를 만들었지 만이 설정에 대해 잘못된 점을 파악할 수 없습니다. 다음 testfile 위는 아름답게 작동합니다
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);
});
});
솔루션이나 아이디어는 매우 환영합니다. 미리 감사드립니다!
건배