由于 webpack 中的 css，Mocha 测试失败 [英] Mocha testing failed due to css in webpack

问题描述

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

I'm new to Mocha and I am trying to use it to test a simple React component. The test would pass if the react component doesn't have any CSS styling but throws a syntax error if the tag within the React component contains any className:

Testing.react.js

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

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 后，出现错误:

after I added the className inside of the input tag an error shows up:

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

我已经在网上搜索过，但到目前为止没有运气.我错过了什么吗?请帮助我或指出我正确的方向将不胜感激.我目前正在使用:
节点快速服务器
反应
反应路由器
网络包
通天塔
摩卡
柴
诗浓
诗农柴

I'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'm currently using:
Node Express Server
React
React-router
Webpack
Babel
Mocha
Chai
Sinon
Sinon-Chai

推荐答案

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

There is a babel/register style hook to ignore style imports:

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

安装:

npm install --save-dev ignore-styles

在没有样式的情况下运行测试:

Run tests without styles:

mocha --require ignore-styles

这篇关于由于 webpack 中的 css，Mocha 测试失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！