Question

尝试使用Invariant Violation: getNodeFromInstance: Invalid argument.渲染我的组件时，我得到'react-test-renderer'。使用'react-addons-test-utils'.CreateRenderer().render()呈现完全相同的组件时，或刚刚启动我的应用时，我没有问题。我已经在类似的问题上阅读了很多，通常的答案是＆＃34;你有多个React的副本加载了＃34;或类似的，但我尝试了一切，但我无法正常工作。

const result = renderer.create(
    (
      <ContextWrapper>
        <Router history={browserHistory}>
          <Navigation />
        </Router>
      </ContextWrapper>
    ),
    document.createElement('div'),
  );

我的ContextWrapper只是用muiTheme包裹它的孩子（见http://www.material-ui.com/）。

class ContextWrapper extends Component {
  getChildContext() {
    return { muiTheme: getMuiTheme() };
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

我的Navigation包含（所有这些组件来自material-ui）AppBar，Drawer包含AppBar和3x自定义组件：

<Link to={this.props.to}>
  <MenuItem onTouchTap={() => this.handleTouchTap()} >
    {this.props.label}
  </MenuItem>
</Link>

以下是我的依赖项：

"devDependencies": {
  "babel": "^6.23.0",
  "babel-jest": "^19.0.0",
  "babel-preset-es2015": "^6.22.0",
  "babel-preset-react": "^6.23.0",
  "pre-commit": "^1.2.2",
  "deep-freeze": "^0.0.1",
  "eslint": "^3.15.0",
  "eslint-config-airbnb": "^14.1.0",
  "eslint-plugin-import": "^2.2.0",
  "eslint-plugin-jsx-a11y": "^4.0.0",
  "eslint-plugin-react": "^6.9.0"
},
"dependencies": {
  "express": "^4.15.2",
  "material-ui": "latest",
  "morgan": "^1.8.1",
  "prop-types": "latest",
  "react": "latest",
  "react-bootstrap": "^0.30.8",
  "react-dom": "latest",
  "react-router-dom": "latest",
  "react-scripts": "^0.9.5",
  "react-tap-event-plugin": "^2.0.1",
  "react-test-renderer": "latest"
}

Answer 1

使用react-test-renderer呈现组件，您只需要一个参数来创建组件。您应该尝试使用create这样的示例渲染组件，如下所示：

const result = renderer.create(
    (
      <ContextWrapper>
        <Router history={browserHistory}>
          <Navigation />
        </Router>
      </ContextWrapper>
    )
  );

Take a look here

我希望能帮到你！

不变违规：getNodeFromInstance：参数无效

1 个答案: