当前位置: 首页 > 面试题库 >

由于Webpack中的CSS,Mocha测试失败

祁均
2023-03-14
问题内容

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

我已经在网上搜索过,但到目前为止还没有运气。我想念什么吗?请帮助我或指出正确的方向,将不胜感激。我当前正在使用:
Node Express Server
React
React-router
Webpack
Babel
Mocha
Chai
Sinon
Sinon-Chai


问题答案:

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

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

安装它:

npm install --save-dev ignore-styles

运行没有样式的测试:

mocha --require ignore-styles



 类似资料:
  • 我是nodejs测试的新手,使用mocha和Chai。现在,我在使用mocha测试API路由处理程序时遇到了问题。我的路由处理程序代码是 Upload函数只是一个multer实用程序,用于存储imagefile。我的测试代码是 运行此代码后显示的输出为

  • 问题内容: 我正在使用React / Redux / Webpack开发一个可运行的Web应用程序,现在开始将测试与Mocha集成在一起。 我遵循Redux文档中有关编写测试的说明,但是现在我的webpack别名遇到了问题。 例如,看看我的动作创建者之一的此测试的imports部分: 正如评论所暗示的那样,mocha在引用别名依赖项时无法解析我的导入语句。 因为我还是Webpack的新手,所以这是

  • 要运行Mocha的测试,您需要GNU Make或兼容; Cygwin应该工作。 $ cd /path/to/mocha $ npm install $ npm test 要使用其他记者: $ REPORTER=nyan npm test

  • 我得到了一个卡尺基准,如下所示:

  • 问题内容: 有没有一种方法可以快速测试这些中间件: 我发现的唯一中间件测试是: 这与上面提供的简单中间件(类似于使用回调测试基本功能)很好地配合使用,但是对于更复杂的中间件,我无法使其正常工作。可以测试这种中间件吗? 问题答案: 这里有一个简单的设置,你可以使用,使用和: 从那里,您可以为模式匹配等添加更多详细的测试。由于仅使用,因此不必模拟整个对象(由Express创建),而只需使用带有属性的简

  • 我正在用JUnit测试一个Spring Boot微服务,我对该服务的resources文件夹中的文件夹路径有问题。 为了通过测试,我必须把文件夹的绝对路径,相反,当使用完整的应用程序时,它与相对路径完美配合。我尝试了一些从相对到绝对路径的翻译,但都不起作用,测试只有在给出绝对路径时才通过,而不是计算。 这些是我的文件: JSONRequest。爪哇: DecryptServiceApplicati