Question

我正在使用mount在我的整个应用程序上运行酶测试。我想测试所有子组件，所以相信这是最好的方法。我还将使用其他测试来测试各个组件。

我的app.test.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import Store from '../../store';
import { shallow, mount } from 'enzyme';

const StoreInstance = Store();

it('renders without crashing', () => {
  const div = document.createElement('div');

  mount(
    <Provider store={StoreInstance}>
            <BrowserRouter>
            <App />
          </BrowserRouter>
        </Provider>
    );
});

当我运行测试时出现以下错误

console.error node_modules/react-dom/cjs/react-dom.development.js:8305
      The above error occurred in the <HighchartsChart> component:
          in HighchartsChart (at Graph.js:42)
          in div (at Graph.js:41)
          in div (at Graph.js:37)
          in Graph (at Dashboard.js:39)
          in div (at Card.js:24)
          in div (at Card.js:10)
          in Card (at Dashboard.js:38)
          in div (at Dashboard.js:20)
          in Dashboard (created by Route)
          in Route (at App.js:59)
          in Switch (at App.js:58)
          in main (at App.js:57)
          in div (at App.js:54)
          in App (created by Connect(App))
          in Connect(App) (created by Route)
          in Route (created by withRouter(Connect(App)))
          in withRouter(Connect(App)) (at App.test.js:17)
          in Router (created by BrowserRouter)
          in BrowserRouter (at App.test.js:16)
          in Provider (created by WrapperComponent)
          in WrapperComponent

      Consider adding an error boundary to your tree to customize error handling behavior.
      You can learn more about error boundaries at react docs (fb.me/react-error-boundaries).

实际上并没有说出错误是什么，所以我很难调试。

我知道它正在抱怨我在graph.js中使用的<ReactHighcharts />组件：

class Graph extends Component {

  render() {

    return (
        <div className="graph-container">

          <div className="graph">
                <ReactHighcharts config={this.props.config ? this.props.config : config} /> // config var is defined but I haven't included it
            </div>

      </div>
    );
  }
}

export default Graph;

非常感谢任何协助。

由于

编辑：

我已根据建议添加了错误边界组件，现在收到跟随错误

InvalidCharacterError at exports.name（/node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js:10:11）在DocumentImpl.createElement（/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:686:5）在Document.createElement（/node_modules/jsdom/lib/jsdom/living/generated/Document.js:92:59） at a.createElement（/node_modules/highcharts/highcharts.js:18:45）在init（/node_modules/highcharts/highcharts.js:95:411） at Object.createElement（/node_modules/highcharts/highcharts.js:65:261） at Object.createElement（/node_modules/highcharts/highcharts.js:111:222） at Object.init（/node_modules/highcharts/highcharts.js:104:305）在Object.C（/node_modules/highcharts/highcharts.js:113:48）在getContainer（/node_modules/highcharts/highcharts.js:259:80）{componentStack：'\ n在HighchartsChart中（在Graph.js：45）\ n在ErrorBoundary（在Graph.js：44）\ n在div中（在Graph.js：43）\ n in div（在Graph.js：39）\ n在图形中（在Dashboard.js：39）\ n在div中（在Card.js：24）\ n在div中（在div中） js：10）\ n in Card（at Dashboard.js：38）\ n in div（at Dashboard.js：20）\ n in Dashboard（由Route创建）\ n in Route（在App.js：59）\ n在Switch中（在App.js：58）\ n在main（在App.js：57）\ n in div（在App.js：54）\ n在App中（由Connect（App）创建）\ n in连接（应用）（由路由创建）\ n路由（由withRouter创建（Connect（App）））\ n inRouter（Connect（App））（在App.test.js：17）\ n在路由器中（已创建） by BrowserRouter）\ n在BrowserRouter中（在App.test.js：16）\ n在Provider中（由WrapperComponent创建）\ n在WrapperComponent'}中

Answer 1

react-highcharts有两个未解决的问题。据我所知，这个问题是highcharts或jsdom。请查看以下资源：

https://github.com/kirjs/react-highcharts/issues/296

https://github.com/tmpvar/jsdom/issues/1791

为什么酶不能测试反应高图？

1 个答案: