首页 文章

由于webpack中的css,Mocha测试失败了

提问于
浏览
68

我是Mocha的新手,我正在尝试用它来测试一个简单的React组件 . 如果react组件没有任何CSS样式,则测试将通过,但如果React组件中的标记包含任何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)

在我在输入标记内添加className后出现错误:

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 | }

我've searched online but no luck so far. Am I missing something? Please help me out or point me to the right direction would be greatly appreciated. I'目前正在使用:
Node Express服务器
应对
反应路由器
的WebPack
巴别塔
摩卡

兴农
兴农柴

7 回答

  • 4

    有一个 babel/register 样式钩子可以忽略样式导入:

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

    安装它:

    npm install --save-dev ignore-styles

    运行没有样式的测试:

    mocha --require ignore-styles

  • 8

    一种简单的方法是导入'ignore-styles';在你的测试类..

  • 12

    对于那些想要在_554494中处理这个问题的人 - 你只需为样式文件添加一个处理程序:

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

    更多here .

  • 0

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

    问题是我在webpack.config.test.js文件中使用的.less加载程序 . 只需交换较少的装载机null-loader解决了我的问题 .

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

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

  • 136

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

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

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

  • 1

    你可以使用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
    
  • 0

    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)'",
    

    tools/testHelper.js

    // Prevent mocha from interpreting CSS @import files
    function noop() {
      return null;
    }
    
    require.extensions['.css'] = noop;
    

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

相关问题