在使用Mocha和Babel进行测试时处理WebPack CSS导入 [英] Handle WebPack CSS imports when testing with Mocha and Babel

问题描述

当测试 .js 有Webpack CSS导入的文件，如 import'./style.css'，Mocha抛出语法错误（因为它试图导入和解析CSS文件作为JS）。有一个解决方案，此已在Stack Overflow上发布 a>，但它只解决如果你还没有使用Mocha的编译器。我使用Babel 5.我试过下面的，但似乎Mocha不支持传递多个编译器：

  // 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; 
  

有多种Mocha编译器的方法，或更好的方式告诉Mocha不要尝试parse Webpack CSS import？

建议的解决方案由@Giles B下面;这正是我需要的。然而，由于我仍然在Babel 5，我需要一些调整，如下所示：

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脚本

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

我使用 babel 和 babel-core ，两个版本 5.8.23 。

解决方案

我遇到了同样的问题，只是让它工作，所以在我的mocha.opts文件中， require 调用：

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

在 babelhook.js 我有一个require语句加载babel：

  //这个文件是mocha.opts 
 //此文件的唯一目的是确保
 //在任何
 //测试代码之前激活babel转换器，并使用相同的babel选项
 
 require（babel-register）（）; 
  

然后从链接提供我设置 css-null-compiler.js 如下： p>

  //防止Mocha编译类
 function noop（）{
 return null; 
} 
 
 require.extensions ['。css'] = noop; 
 require.extensions ['。scss'] = noop; 
  

希望有帮助。

When testing .js files that have Webpack CSS imports like import './style.css', Mocha throws a syntax error (because it tries to import and parse the CSS file as JS). There is a solution for this that has already been posted on Stack Overflow, but it only addresses if you aren't already using a compiler with Mocha. I'm using Babel 5. I've tried the following, but it seems that Mocha doesn't support passing multiple compilers:

// 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;

Is there a way to have multiple Mocha compilers, or a better way to tell Mocha not to try to parse Webpack CSS imports?

---

EDIT:

I like the proposed solution by @Giles B below; it was exactly what I needed. However, since I am still on Babel 5 I needed a few tweaks as shown below:

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 script

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

This is working for me using babel and babel-core, both version 5.8.23.

解决方案

I came across the same problem and just got it working, so in my mocha.opts file I added the following require calls:

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

In babelhook.js I have one require statement to load 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")();

Then from the link you provided I setup css-null-compiler.js as follows:

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

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

Hope that helps.

这篇关于在使用Mocha和Babel进行测试时处理WebPack CSS导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！