设置状态导致第二次渲染后,反应测试失败

到目前为止,JSDOM和Mocha的测试一直很顺利.到目前为止,还没有必要测试任何改变其状态的组件.我发现我的第一个问题是测试一个改变状态的组件.

错误

1) Reduced Test Case - @current Tests that Fail when Component changes state and renders "before each" hook:
 Error: Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use React.renderToString for server rendering.
  at Context.<anonymous> (test/react-reflux/parts/Reduced-spec.js:47:32)

组件:Reduced.js

var React = require('react');

var Reduced = React.createClass({

  getInitialState() {
      console.log("start off with editing as false");
      return {editing: false};
  },

  edit() {
      console.log("Setting State …

我有一个非常简单的React.js组件，该组件使用“阅读更多” /“阅读更少”功能来修饰一长段标记。

我在Jest上进行了一些测试，但是，我无法断言DOM元素的高度正在增加到原始内容的大小。

在Jest测试环境中，我对getDOMNode（）。scrollHeight的调用似乎未返回任何内容。

这是代码和测试失败的存储库链接：https : //github.com/mguterl/react-jest-dom-question

下面是说明相同问题的代码和测试的简化版本：

简码

var ReadMore = React.createClass({
  getInitialState: function() {
    return {
      style: {
        height: '0px'
      }
    }
  },

  render: function() {
    return (
      <div>
        <div ref='content' className='read-more__content' style={this.state.style} dangerouslySetInnerHTML={{__html: this.props.content}} />
        <a onClick={this.expand} href='#'>Expand</a>
      </div>
    );
  },

  expand: function() {
    // This call to scrollHeight doesn't return anything when testing.
    var height = this.refs.content.getDOMNode().scrollHeight;

    this.setState({
      style: {
        height: height
      }
    });
  }
});

测试

jest.dontMock('../ReadMore');

global.React = require('react/addons');
var TestUtils = React.addons.TestUtils; …

当我从React 12.2升级到React 13.3时,我的测试套件中出现以下错误:

错误:不变违规:unmountComponentAtNode(...):目标容器不是DOM元素.

我正在使用此博客文章使用Jasmine测试我的代码.此代码中发生错误:

describe("A component", function() {

  var instance;
  var container = document.createElement("div");

  afterEach(function() {
    if (instance && instance.isMounted()) {
      // Only components with a parent will be unmounted
      React.unmountComponentAtNode(instance.getDOMNode().parent);
    }
  });
  ...rest of test suite...
  // the instances of renderIntoDocument that cause the failure look like the below
  it("Causes my test suite to fail.", function() {
    instance = TestUtils.renderIntoDocument(<MyReactElement/>);
  });
)};

我知道这getDOMNode()已被弃用,但这并不是造成错误的原因.

当我检查instance.getDOMNode()它时,它返回给定的实例,但是当它出错时,它instance.getDOMNode().parent是未定义的.调用React.unmountComponentAtNode此未定义的变量会导致错误.

像这样的答案表明存在某种竞争条件,但我不确定这将如何适用于我的测试套件.谢谢你的帮助!

我有一个非常简单的测试

/** @jsx React.DOM */
var store = require('../simpleStore');
var TestUtils = require('react/addons').addons.TestUtils;

describe("my tests",function(){
  it('simple test',function(){
     var x=10,
        y=20;
     expect(x).not.toBe(y);
  })
})

只要我不需要TestUtils,测试就可以正常工作.我添加任何node_module引用的那一刻,我开始看到下面的错误

Using Jest CLI v0.8.0, jasmine1
FAIL  build/stores/__tests__/simple-test.js

? Runtime Error

Error: ../stores/__tests__/simple-test.js:
../../node_modules/react/addons.js:
../../node_modules/react/lib/ReactWithAddons.js:
../../node_modules/react/lib/LinkedStateMixin.js:
../../node_modules/react/lib/ReactLink.js:
../../node_modules/react/lib/React.js:
../../node_modules/react/lib/ReactDOM.js:
../../node_modules/react/lib/ReactDOMTextComponent.js:
../../node_modules/react/lib/ReactComponentBrowserEnvironment.js:
../../node_modules/react/lib/ReactDOMIDOperations.js:
../../node_modules/react/lib/ReactMount.js:
../../node_modules/react/lib/ReactElement.js: Failed to get mock metadata:
../../node_modules/react/lib/canDefineProperty.js
npm ERR! Test failed.  See above for more details.

我敢肯定很多人都在使用开玩笑而且我错过了一些愚蠢的东西......是否有任何想法可以解决这个问题？

我目前正在测试React组件,组件的内联样式会根据不同的道具值进行更改.

这是一个关于我想做什么的例子:

let firstChild = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'div');
    expect(firstChild.getDOMNode().style).toEqual({
      fontSize: '20px'
    });

这是组件道具:

let renderedComponent = TestUtils.renderIntoDocument(
      <CircleIcon
        size="small" />

这是要测试的组件dom:

return (
      <div className="circle-icon" style={boxStyle}>
        <span className={this.props.icon}></span>
      </div>
    );

如果我能得到boxStyle中的内容,我可以断言它的测试结果.

非常感谢!

我正在尝试测试 combineReducers 但出现以下错误。

类型错误：_testReducer.testReducer.test11 不是函数

以下是减速机

// testReducer.js
import { combineReducers } from "redux-immutable";
const test11 = (state, action) => {
 switch (action.type) {
    case "temp11":
      return true;
    default:
      return state;
  }
};
const test22 = (state, action) => {
 switch (action.type) {
    case "temp22":
      return false;
    default:
      return state;
  }
};
export const testReducer = combineReducers({
  test11,
  test22,
});

以下是测试用例

// testReducer.test.js
import { testReducer } from "./testReducer.js";
describe("test for testReducer", () => {
  it("test11", () => {
    const …

我目前正在为我的React + MaterialUi应用程序编写单元测试.

在我的应用程序中,我有一个Dialog.我想确保取决于按下对话框上的按钮:

<FlatButton
  label="Cancel"
  secondary={true}
  onTouchTap={this._cancelDialog.bind(this)} 
 />
 <FlatButton
   label="Submit"
   primary={true}
   onTouchTap={this._confirmDialog.bind(this)} 
 />

内部状态相应地改变.

不幸的是,我无法使用TestUtils.scryRenderedComponentsWithType(FlatButton)
或
scryRenderedComponentsWithTag("button")
等等来获取对话框内容 .

关于如何测试流量的任何想法？

更新1

所以,我可以通过调用TestUtils.scryRenderedComponentsWithType(对话)取得对话实例.但我无法得到对话框的内容.DOM明智的内容不会在视图内部呈现.它在文档级别(div)上的新创建节点中呈现.所以我试过这个:

let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);

上面的例子中的cancelButton是正确的DOM元素.但是,Simulate.click不会触发组件单击功能.

对乔纳斯说