我是摩卡咖啡的新手,我正试图用它来测试一个简单的react 成分.如果react组件没有任何CSS样式,但如果react组件中的标记包含任何类名,则会抛出语法错误,则测试将通过:

测试.react js

import React from 'react';

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

测试.jsx

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

import TestingSample from '../../../app/components/测试.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 | }

我在网上搜索过,但到目前为止运气不好.我错过什么了吗?请帮助我,或者给我指出正确的方向,我将不胜感激.

推荐答案

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

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

安装它:

npm install --save-dev ignore-styles

运行没有样式的测试:

mocha --require ignore-styles

Reactjs相关问答推荐

在此上下文中如何在缓冲(隐藏)视频和渲染视频之间切换?

为什么我无法访问窗口事件处理程序中的状态?

从app.js导航,这是在BrowserRouter包装之外

NextJS(AppRouter)、Apollo(客户端),在根布局中使用ApolloProvider时出错

为什么我的标签在Redux API中不能正常工作?

react 路由导航不工作,但手动路由工作

避风港访问端口以包含Reaction应用程序

如何用Reaction做交互式的MathML?

捕获表单数据时的Reactjs问题

Reaction中的数据加载不一致

GoLang有条件地为.js.gz提供服务(如果它存在),否则为.js

无法在 NextJS 中获取嵌套对象

React Context API 在 Next.js 中更改路由时获取默认数据

如何管理可重用无线电输入的 React 状态?

React Router v6 路径中的符号

如何在 React map 函数循环中使用
标签

使用 Jest/React 测试库时,如何测试由 setInterval 函数创建的 DOM 更改?

调用 Statsig.updateUser 时 UI 不呈现

Storybook - 无法解析generated-stories-entry.cjs/字段browser不包含有效的别名配置

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上