Могу ли я использовать мокко для тестирования тестовых шаблонов в приложении ecmascript-6?

Question

Я заменил все мои React jsx react-templates в приложении ecmascript-6. Мне очень нравится иметь html-шаблоны в выделенном .rt-файле вместо того, чтобы смешиваться с кодом es6; jsx просто казался неправильным.

Я использую webpack-dev-сервер в разработке. Я должен был преобразовать .rt в es6 на шаге preLoader, чтобы заставить это работать, тогда регулярный загрузчик babel es6-to-commonjs работает с результатом. Webpack отлично работает в dev и производстве. webpack -p компилирует и минимизирует все до куска commonjs для производственных сборок. До сих пор.

Вот моя функционирующий модуль грузчики конфигурация в webpack.config.js:

... 
    module: { 
    preLoaders: [{ 
     test: /\.rt$/, 
     loader: 'react-templates?modules=es6' 
    }], 
    loaders: [{ 
     test: /\.jsx?$|\.rt$/, 
     loader: 'babel' 
    }, { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style', ['css', 'sass?sourceMap']) 
    }] 
    }, 
... 

Вот где начинается проблема - я имел испытание мокко блока работы с компонентами JSX, но я не могу показаться, чтобы получить те же модульные тесты, которые нужно запустить, теперь, когда я использую шаблоны ответов.

Mocha скомпилирует es6 js для commonjs со специальным компилятором, но единственное, что я могу найти для шаблонов реакции и мокки, - это модуль mocha-react-templates-compiler, который жестко закодирован для преобразования шаблонов непосредственно в commonjs, а не в es6.

Таким образом, линии, как это в моем ES6:

import MyComponentRT from './MyComponent.rt'

отлично работают в разработчика и прод но делать не работы в мокко тестах.

Я пробовал:

mocha --recursive --compilers rt:mocha-react-templates-compiler,js:babel-register ./js/test

Но я получаю ошибки, которые явно связанные с ES6 кода ожидает файлы Rt также быть ES6. Реверсирование порядка компилятора не помогает.

Кто-нибудь еще использует шаблоны реакции и es6 и mocha в одном проекте? Как вы получили тесты мокки?

Answer 1

Я закончил тем, что решил это с глотком.

Я использовал gulp для явной компиляции файлов .rt на es6, а затем скомпилировал es6 до .rt.js, аналогичный тому, что настроен webpack. Все выходные файлы сбрасываются во временную папку «testbuild», то же самое делается для файлов .js, и мокка может запускать тесты оттуда.

gulpfile.js:

var gulp = require('gulp'); 
var clean = require('gulp-clean'); 
var rt = require('gulp-react-templates'); 
var babel = require('gulp-babel'); 

var testbuild_dir = 'testbuild'; 

gulp.task('clean', function() { 
    return gulp.src(testbuild_dir, {read:false}).pipe(clean()); 
}); 

gulp.task('buildrt', ['clean'], function() { 
    return gulp.src('src/js/**/*.rt') 
    .pipe(rt({modules: 'es6'})) 
    .pipe(babel({presets: ['es2015']})) 
    .pipe(gulp.dest(testbuild_dir)); 
}); 

gulp.task('buildjs', ['buildrt'], function() { 
    return gulp.src('src/js/**/*.js') 
    .pipe(babel({presets: ['es2015','react']})) 
    .pipe(gulp.dest(testbuild_dir)); 
}); 

gulp.task('testbuild', ['buildjs']); 

package.json скрипты:

"scripts": { 
    "dev": "webpack-dev-server --content-base /build --inline --devtool source-map --host 0.0.0.0", 
    "build": "webpack -p", 
    "test": "npm run testbuild && npm run testartifacts && npm run testclean", 
    "testbuild": "gulp testbuild", 
    "testartifacts": "mocha --recursive ./testbuild/js/test", 
    "testclean": "gulp clean" 
    }, 

Теперь я могу просто запустить npm run test и все работает!