由于 webpack 中的 css，Mocha 测试失败

Posted 2023-02-15

【中文标题】由于 webpack 中的 css，Mocha 测试失败

【英文标题】：Mocha testing failed due to css in webpack

【发布时间】：2015-11-21 01:44:27

【问题描述】：

我是 Mocha 的新手，我正在尝试用它来测试一个简单的 React 组件。如果 React 组件没有任何 CSS 样式，则测试将通过，但如果 R​​eact 组件中的标签包含任何 className，则会引发语法错误：

Testing.react.js

import React from 'react';

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

testing.jsx

import 
  React,
  sinon,
  assert,
  expect,
  TestUtils
 from '../../test_helper';

import TestingSample from '../../../app/components/Testing.react.js';

describe('TestingSample component', function()
    before('render and locate element', function()
        var renderedComponent = TestUtils.renderIntoDocument(
            <TestingSample />
        );

        var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
            renderedComponent, 'input'
        );

        this.inputElement = inputComponent.getDOMNode();
    );

    it('<input> should be of type "text"', function () 
        assert(this.inputElement.getAttribute('type') === 'text');
    );
)

测试将通过：

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx


  TestSample component
    ✓ <input> should be of type "text"


  1 passing (44ms)

在输入标签内添加类名后，出现错误：

import React from 'react';
import testingStyle from '../../scss/components/landing/testing.scss';

export default class Testing extends React.Component 
  render() 
    return (
      <section>
        <form>
          <input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />     
        </form>
      </section>
    );
  

测试结果：

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color 
    | ^
  2 |   color: red;
  3 | 

我已经在网上搜索过，但到目前为止还没有运气。我错过了什么吗？请帮助我或指出我正确的方向将不胜感激。 我目前正在使用： Node Express 服务器 反应 反应路由器 网页包 通天塔 摩卡 柴 诗乃 诗乃柴

【问题讨论】：

你试过 webpack-require 包吗？ github.com/petehunt/webpack-require

【参考方案1】：

虽然很老了，但这个问题仍然很重要，所以让我抛出另一个解决方案。

使用pirates，一个为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 [whatever other parameters you use]

这很简单，很优雅，与 ignore-styles 不同，它并不意味着您只忽略样式。此外，如果您需要对测试应用更多技巧，例如模拟整个模块，这很容易扩展。

【参考方案2】：

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

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

【参考方案3】：

对于那些在jest 中寻找如何处理此问题的人 - 您只需为样式文件添加一个处理程序：

// package.json

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


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

更多here.

【参考方案4】：

一种简单的方法是导入'ignore-styles'；在您的测试课程中..

【参考方案5】：

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

问题是我在 webpack.config.test.js 文件中使用的 .less 加载器。只需将 less-loader 换成 null-loader 即可解决我的问题。

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

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

【讨论】：

在我看来，这与两年前 Jim Skerritt 发布的解决方案相同：用 null-loader 替换您的装载机。

【参考方案6】：

My same answer as here，这就是我过去在 Babel 6 上的工作

package.json

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

工具/testHelper.js

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


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

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

【讨论】：

如果noop() 返回，你也可以用它来模拟类名。例如，如果你使用了import styles from 'my.css'，你可以在你的测试套件中设置styles.myClassName，你的react组件引用相同的CSS模块就会看到这些值。这在像 Enzyme 这样的测试框架中使用类选择器时非常有用

效果很好。我已将所有 mocha 选项移至 mocha.opts 以使脚本干净。

【参考方案7】：

有一个babel/register 样式挂钩可以忽略样式导入：

https://www.npmjs.com/package/ignore-styles

安装它：

npm install --save-dev ignore-styles

运行没有样式的测试：

mocha --require ignore-styles

【讨论】：

这可以节省我的时间。这个修复也适用于伊斯坦布尔。谢谢！

如果我也想测试我的样式怎么办？

这里有一个要点，但我无法让它与 webpack 友好的工作 ~ 导入 - gist.github.com/ryanseddon/e76fd16af2f8f4f4bed8

【参考方案8】：

你可以使用一个css编译器运行mocha，编译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

【讨论】：

这个解决方案对我有用，你唯一需要确保的是你包含css-dnt-compiler文件的正确路径，所以在我的情况下，我将它存储在test中文件夹，所以命令变成：mocha --compilers js:babel-core/register,css:test/css-dnt-compiler.js --recursive

稍微简单一点require.extensions['.scss'] = ()=>null; require.extensions['.css'] = ()=>null; 但这个答案很完美

【参考方案9】：

由于您使用的是 webpack，因此当 webpack 在您的组件中遇到所需的 CSS/LESS/SASS/etc 文件时，请使用 null-loader 加载 null。通过 npm 安装，然后更新你的 webpack 配置以包含加载器：

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

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

【讨论】：

我试过了，好像不行。另外，我注意到错误不是由向组件添加 className 引起的。导入css文件的原因：import testingStyle from '../../scss/components/landing/testing.scss';