gpt4 book ai didi

reactjs - 错误 : Invariant Violation: dangerouslyRenderMarkup(. ..):无法在工作线程中渲染标记

转载 作者:行者123 更新时间:2023-12-03 13:30:42 28 4
gpt4 key购买 nike

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

到目前为止,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 to Edit");
this.setState({editing: true});
},

render() {
console.log("Rendering");
return (
<span onClick={this.edit}>
{(this.state.editing) ? "Editing" : "Click To Edit"}
</span>
);
}

});

module.exports = Reduced;

测试:1 次通过,1 次失败

    var React, TestUtils, jsdom, Reduced, expect;

describe('Reduced Test Case', function () {

before(function () {

jsdom = require('jsdom');
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.parentWindow;

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

Reduced = require('./Reduced');

expect = require('chai').expect;

this.component = TestUtils.renderIntoDocument(
<Reduced />
);

var root = TestUtils.findRenderedDOMComponentWithTag(this.component, 'span');
this.el = root.getDOMNode();

});

describe("Tests Pass without simulate", function () {

it("Root Element Reads 'Click To Edit'", function () {
expect(this.el.innerHTML).to.equal('Click To Edit');
});

});

describe("Tests that Fail when Component changes state and renders", function () {

beforeEach(function () {

//
// Simulate invokes edit, invokes set state, invokes render, then error occures
//

TestUtils.Simulate.click(this.el);

});

it("Root Element Reads 'Editing'", function () {
expect(this.el.innerHTML).to.equal('Editing');
});

});

});

结果

> mocha --compilers js:babel/register

Reduced Test Case - @current
start off with editing as false
Rendering

Tests Pass without simulate
✓ Root Element Reads 'Click To Edit'

Tests that Fail when Component changes state and renders
Setting State to Edit
Rendering

1) "before each" hook


1 passing (379ms)
1 failing

1) Reduced Test Case 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/Reduced-spec.js:47:32)

我快疯了

  • 所有内容都在 global.window 和 global.document 之后加载
  • 模拟事件在发生错误之前调用 edit(),然后调用 render()
  • 在出现此状态更改问题之前,所有 React Mocha JSDOM 测试都运行良好
  • 请帮忙???

最佳答案

设置 JSDOM 设置缺少 global.navigator

global.navigator = {
userAgent: 'node.js'
};

关于reactjs - 错误 : Invariant Violation: dangerouslyRenderMarkup(. ..):无法在工作线程中渲染标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30203862/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com