다른 사람들이이 문제를 겪는다면 별도의 빌드 및 테스트 명령을 사용하여 karma-webpack 및 카르마 사전 처리를 포기한 "빌드 후 나머지"접근 방식을 사용할 수 있습니다. .
import webpack from 'webpack';
import { join, resolve, parse } from 'path';
import SplitByPathPlugin from 'webpack-split-by-path';
import file from 'file';
const plugins = [
new SplitByPathPlugin([
{
name: 'vendor',
path: resolve(__dirname, 'node_modules')
}
]),
new webpack.SourceMapDevToolPlugin({
test: /\.jsx?$/,
exclude: [/vendor/]
})
];
const entryPoints = {};
const testFileRegex = new RegExp('\.test\.jsx?$');
const pathPrefixRegex = new RegExp('^src/js/?');
file.walkSync('src/js/', (dirPath, dirs, files) => {
for (const file of files) {
if (file.match(testFileRegex)) {
const parsedPath = parse(file);
const entryKey = join(
dirPath.replace(pathPrefixRegex, ''),
parsedPath.name
);
entryPoints[entryKey] = './' + join(dirPath, parsedPath.name);
}
}
});
const config = {
entry: entryPoints,
output: {
filename: '/[name]-[chunkhash].js',
chunkFilename: '/[name]-[chunkhash].js',
path: resolve(__dirname, 'dist-test'),
pathinfo: true
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader!eslint-loader',
exclude: [/node_modules/],
},
{
test: /\.json$/, loader: 'json'
}
],
},
bail: true,
resolve: {
extensions: ['', '.js', '.jsx', '.json'],
},
plugins: plugins,
stats: {
assets: false,
cached: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
hash: false,
modules: false,
publicPath: false,
reasons: false,
source: false,
timings: false,
version: false,
warnings: false
},
node: {
child_process: 'empty',
fs: 'empty'
},
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': 'window'
}
};
export default config;
의 핵심 부분은 각 테스트 파일 및 사용에 대한 진입 점을 생성하는 것입니다 : 여기
테스트 (예 : webpack.config.babel.test.js)에 고유 한 내 웹팩 설정입니다 청크를 생성 할 때 응용 프로그램을 공급 업체 코드와 자동으로 구분하는 플러그인
webpack-split-by-path. 여기
내가 갔다 카르마의 설정입니다 :
process.env.BABEL_ENV = 'test';
function karmaConfig(config) {
config.set({
basePath: '',
frameworks: ['mocha'],
files: [
{
pattern: 'dist-test/vendor-*.js',
watched: false
},
'dist-test/**/*.test-*js?(x)'
],
exclude: [],
reporters: ['progress'],
port: 9876,
colors: true,
browsers: ['Firefox', 'Chrome'],
singleRun: true,
logLevel: config.LOG_ERROR
})
}
export default karmaConfig;
의 핵심 부분은 공급 업체 파일이 files 설정 옵션에 먼저 나열하고 테스트 파일 다음에 시청하지 않도록 설정되어 있습니다. 이렇게하면 공급 업체 코드가 항상 각 테스트 케이스별로로드/삽입됩니다.
내 질문에 다른 방법이 있는지 묻는 있지만이 접근법을 꽤 잘 작동합니다. 성능이 훨씬 좋습니다.
편집 한
(I 처음에는 몰랐어요)이 방법의 유일한 단점은 당신이 karma-webpack 및 사전 처리를 할 수 당신이 정말로 (테스트 관찰을 달성 할 수 없다는 것입니다 by webpack) 빌드 및 테스트 단계의 분리 때문입니다. 2
이 접근
편집 (당신이 추가/벤더 라이브러리을 제거하지 않은 경우에도 ) 당신이 당신의 응용 프로그램 코드를 변경 재 transpiling 공급 업체 코드의 문제에서 모든 시간을 겪었다. 이것은 느리게 물건을 느리게했다.
는 당신이 다시보고 테스트를 시작 할 수 있도록이 문제를 해결하기 위해 어떻게하고 싶은 것은 이것이다 : 시계 모드에서
- 실행 웹팩, 당신의
dist-test/ 디렉토리 때마다 응용 프로그램 코드 변경으로 구축 할 수 있습니다.
- 시계 모드에서 카르마를 실행하여
dist-test/ 디렉토리에서 업데이트되는 모든 테스트 파일을 가리 킵니다.
이 솔루션은 하나의 단점을 제외하고는 하나의 npm/yarn 명령에서이 두 가지를 모두 실행할 수 없다는 점을 제외하고는 완벽합니다.
참고 : Webpack 테스트 빌드의 출력 파일 이름에 해시 (예 :파일 이름은 내용 변경간에 일관성을 유지해야합니다. 이렇게하면 테스트 파일을 변경할 때 Webpack이 이전 파일을 삭제하지 않기 때문에 이전 테스트 코드와 새 테스트 코드를 실행하지 않게됩니다..