Xử lý nhập WebPack CSS khi thử nghiệm với Mocha và Babel

Question

Khi thử nghiệm .js tệp có nhập khẩu Webpack CSS như import './style.css', Mocha ném lỗi cú pháp (vì nó cố nhập và phân tích cú pháp tệp CSS dưới dạng JS). Có một giải pháp cho that has already been posted on Stack Overflow này, nhưng nó chỉ giải quyết nếu bạn chưa sử dụng trình biên dịch với Mocha. Tôi đang sử dụng Babel 5. Tôi đã thử những điều sau đây, nhưng có vẻ như Mocha không hỗ trợ chuyển nhiều trình biên dịch:

// npm test script 

mocha ./src/**/*Test.js --compilers css:./scripts/mocha-webpack-compiler.js js:babel/register 

// scripts/mocha-webpack-compiler.js 

function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 

Có cách nào để có nhiều trình biên dịch Mocha hay không hay hơn Mocha không cố gắng phân tích cú pháp nhập khẩu Webpack CSS?

---

EDIT:

Tôi thích giải pháp được đề xuất bởi @Giles B dưới đây; đó là chính xác những gì tôi cần. Tuy nhiên, kể từ khi tôi vẫn còn trên Babel 5 Tôi cần một vài điều chỉnh như hình dưới đây:

mocha.opts

--require scripts/support/babelhook 
--require scripts/support/mocha-webpack-compiler 

scripts/babelhook.js

require('babel/register'); 

scripts/mocha-webpack- compiler.js

function noop() { 
    return null; 
} 
require.extensions['.css'] = noop; 

mocha kịch bản

mocha ./src/**/*Test.js 

Tính năng này hoạt động với tôi bằng cách sử dụng babel và babel-core, cả hai phiên bản 5.8.23.

Answer 1

tôi đi qua cùng một vấn đề và chỉ có nó làm việc, vì vậy trong mocha.opts tôi nộp tôi thêm require cuộc gọi sau đây:

--require test/babelhook 
--require test/css-null-compiler 

Trong babelhook.js Tôi có một yêu cầu tuyên bố để tải babel:

// This file is required in mocha.opts 
// The only purpose of this file is to ensure 
// the babel transpiler is activated prior to any 
// test code, and using the same babel options 

require("babel-register")(); 

sau đó, từ liên kết mà bạn provided tôi thiết lập css-null-compiler.js như sau:

// Prevent Mocha from compiling class 
function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 
require.extensions['.scss'] = noop; 

Hy vọng điều đó sẽ hữu ích.

Answer 2

Dựa trên câu trả lời @Giles' ở trên, đây là những gì tôi đã sử dụng để làm việc trên Babel 6

package.json

"scripts": { 
    "test": "mocha --compilers js:babel-core/register 
      --require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'", 

công cụ/testHelper.js

// Prevent mocha from interpreting CSS @import files 
function noop() { 
    return null; 
} 

require.extensions['.css'] = noop; 

Điều này cho phép bạn có các bài kiểm tra bên trong thư mục src cùng với các thành phần của bạn.