1

我正在尝试学习为我正在构建的反应应用程序编写单元测试，但是当我尝试进行浅渲染或完整渲染时，我一直遇到问题。但是，当我在 chrome 中查看时，它不会引发错误并正确呈现。我试图了解测试失败的原因。

失败的测试

应用程序.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';
import App from './App';

//fails
it('Full render without crash', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

//Passes
it('Shallow render without crash', () => {
  shallow(<App />);
});

测试失败并给出错误：TypeError：无法读取 null 的属性“_layerAdd”。组件出现上述错误：

      in GeoJSON (created by Context.Consumer)

      in ForwardRef(Leaflet(GeoJSON)) (at Country.js:87)

      in ErrorBoundary (at Country.js:86)

      in div (at Country.js:85)

      in Country (at CountryList.js:21)

      in div (at CountryList.js:20)

      in CountryList (at MainMap.js:33)

      in div (created by Map)

      in Map (at MainMap.js:28)

      in MainMap (at App.js:9)

      in div (at App.js:8)

      in App (at App.test.js:9)

所以我认为这与我将数据从 CountryList 组件传递到 Country 组件的方式有关。但是当我尝试在运行时查看它时，我找不到任何东西。我从国家列表中的 json 文件中读取数据，并将其作为道具提供给国家组件。

CountryList.js

import React, { Component } from 'react';
import Country from './Country.js';
import data from '../../../data/test.json';




export default class CountryList extends Component {

    constructor(props) {
        super(props);
        this.state = {
        }

    }


    render() {
        return(
            <div>
                <Country data={data[0]} key={data[0].properties.NAME}/>
            </div>
        );
    }
}

国家.js

import React, { Component } from 'react';
import { GeoJSON } from 'react-leaflet';
import SlidingPane from 'react-sliding-pane';
import "./SidePanel.css";



class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { 
          hasError: false,
          err : null, 
          help : null, 
        };
    }
  
    componentDidCatch(error, info) {
      // Display fallback UI
      this.setState({ 
          hasError: true,
          err : error,
          help : info
         });
      // You can also log the error to an error reporting service
      console.log("Error incoming");
      console.log(error);
      console.log(info);
    }
  
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        console.log("There was an error");
        console.log(this.state.err);
        console.log(this.state.help);
      }
      return this.props.children;
    }
  }



export default class Country extends Component {
        constructor(props) {
        super(props);
        this.state = {
            color: 'green', 
            isPaneOpen: false
        }
        console.log("Props from contry list")
        console.log(props)
    }

    color_control = (color) => {
        return {color: this.state.color};
    }

    render() {
        return (
            <div>
                <ErrorBoundary>
                    <GeoJSON 
                        data={this.props.data.geometry} 
                        key={this.props.data.properties.NAME}
                        style={this.color_control}
                    />
                </ErrorBoundary>
            </div>
        );
    }
}

另一个测试在同一个地方失败，只是出现错误：

TypeError：无法读取未定义的属性“几何”

任何帮助，将不胜感激。我是反应和单元测试的新手，所以我可能只是错误地将数据输入到事物中，但它似乎在浏览器中正确呈现，所以我现在被卡住了。

4

0 回答 0