单元测试 – 摩卡测试失败,由于css在webpack

前端之家收集整理的这篇文章主要介绍了单元测试 – 摩卡测试失败,由于css在webpack前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新来的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 | }

我在网上搜索,但没有运气到目前为止。我缺少什么?请帮助我或指点我的正确方向会非常感谢。@H_502_23@我目前使用:@H_502_23@节点Express服务器@H_502_23@反应@H_502_23@React-router@H_502_23@Webpack@H_502_23@巴贝尔@H_502_23@摩卡@H_502_23@柴@H_502_23@Sinon@H_502_23@Sinon-Chai

解决方法

有一个babel /注册样式钩,忽略风格导入:

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

安装:

npm install –save-dev ignore-styles

运行不带样式的测试:

摩卡 – 要求忽略风格

原文链接:https://www.f2er.com/css/222335.html

猜你在找的CSS相关文章