Unit testing Mocha测试因网页包中的css而失败

我是摩卡咖啡的新手，我正试图用它来测试一个简单的反应成分。如果react组件没有任何CSS样式，但如果react组件中的标记包含任何类名，则会抛出语法错误，则测试将通过：

Testing.react.js

import React from 'react';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" />
        </form>
      </section>
    );
  }
}

我在网上搜索过，但到目前为止运气不好。我错过什么了吗？请帮助我，或者给我指出正确的方向，我将不胜感激。 我目前正在使用：
Node Express服务器
反应
反应路由器
网页包
巴别塔
摩卡咖啡
柴
西农

---

Sinon Chai

由于您正在使用webpack，当webpack在您的组件中遇到所需的CSS/LESS/SASS/etc文件时，请使用加载

null

。通过npm安装，然后更新您的网页包配置以包含加载程序：

{
    test: /(\.css|\.less|.\scss)$/,
    loader: 'null-loader'
}

---

显然，这将阻止您在实际应用程序中加载CSS，因此您需要为使用此加载程序的测试包提供单独的网页包配置。

您可以使用运行mocha的CSS编译器，编译器js如下所示：

css-dnt-compiler.js

function donothing() {
  return null;
}

require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
// ..etc

然后像这样运行mocha命令：

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive

---

有一个

babel/register

style钩子可以忽略样式导入：

安装它：

npm安装--保存开发人员忽略样式

不使用样式运行测试：

mocha——需要忽略样式

，这就是我在巴别塔6上的工作

package.json

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

tools/testHelper.js

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

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

---

这使您能够将测试放在组件旁边的src文件夹中。您可以使用require.extensions添加任意数量的扩展。

这些解决方案都不适合我，因为我使用的是mocha webpack，而且它不接受“-compilers”开关。我实现了ignore styles包，如最流行的答案中所述，但它似乎是惰性的，在我的伊斯坦布尔覆盖率报告中没有区别（.less文件仍在测试中）

问题是我在webpack.config.test.js文件中使用的.less加载程序。只需更换较少的加载程序，即可解决我的问题

module: {
    rules: [
        {
            test: /\.less$/,
            use: ['null-loader']
        }
    ]
}

---

对我来说，这是迄今为止最简单的解决方案，直接针对我的测试配置，而不必更改/添加package.json脚本，或者更糟糕的是，添加新的.js文件。

一个简单的方法是导入“忽略样式”；在您的测试类中..

对于那些在

jest

中查看如何处理此问题的人，您只需为样式文件添加一个处理程序：

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js
module.exports = {};

//package.json
{
“笑话”：{
“moduleNameMapper”：{
“\\（css | less | scss | sass）$”：“/\uu mocks\uuu/styleMock.js”
}
}
}
//_uuumock_uuuu/styleMock.js
module.exports={}；

---

更多。

下面的代码工作时没有任何依赖项。只需将其添加到测试的顶部即可

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};

---

虽然这个问题已经很老了，但仍然是相关的，所以让我提出另一个解决方案

使用，一个向

require（）

添加钩子的包-如果您使用Babel，您已经拥有了它

示例代码：

// .test-init.js
const { addHook } = require('pirates');

const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];

addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });

这样，您可以像这样调用mocha:

mocha--require.test-init.js[您使用的任何其他参数]

---

这是直截了当、优雅的，与忽略样式不同，它并不意味着你只忽略样式。此外，如果您需要在测试中应用更多的技巧，例如模拟整个模块，那么这很容易扩展。

我试过了，它似乎不起作用。另外，我注意到这个错误不是由于向组件添加类名引起的。这是因为导入了css文件：

import testingStyle from'../../scss/components/landing/testing.scss'您是否尝试过webpack require软件包？这救了我一天。这一修正也适用于伊斯坦布尔。非常感谢。如果我也想测试我的风格呢？这里有一个要点，但我无法让它与网页友好的~imports一起工作-这个解决方案对我来说很有效，你唯一要确保的是你包含了
css dnt编译器
文件的正确路径，所以在我的例子中，我将它存储在
test
文件夹中，因此命令变成：
mocha--compilers js:babel core/register，css:test/css-dnt-compiler.js--recursive
稍微简单一点
require.extensions['.scss']=（）=>null；require.extensions['.css']=（）=>null
但是这个答案很完美如果
noop（）
返回
{}
，您也可以使用它来模拟类名。例如，如果您使用了从“my.css”导入样式的
，
，您可以在测试套件中设置
样式.myClassName
，引用相同css模块的react组件将看到这些值。当在测试框架中使用类选择器（如EnzymeWorks good）时，这非常有用。我已将所有mocha选项移到mocha.opts以使脚本干净。在我看来，这与两年前发布的解决方案相同：将您的加载程序替换为
null加载程序
。
module: {
    rules: [
        {
            test: /\.less$/,
            use: ['null-loader']
        }
    ]
}

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js
module.exports = {};

var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
    if (arguments[0] && arguments[0].endsWith(".css"))
        return;
    return originalRequire.apply(this, arguments);
};

// .test-init.js
const { addHook } = require('pirates');

const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];

addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });