Javascript jest酶装入-检查this.props.location.query时无法准备undefined的属性

我有一个具有以下componentDidMount（）方法的组件：

我还在构造函数中设置状态：

constructor(props) {
    super(props);

    this.state = {
      count: 180,
      countdownStatus: 'stopped'
    };

    this.handleStatusChange = this.handleStatusChange.bind(this);
    this.handleSetCountdown = this.handleSetCountdown.bind(this);
    this.handleSliderInput = this.handleSliderInput.bind(this);
  }

然后我通过渲染将状态传递给另一个组件

function:
  render() {
    let {count, countdownStatus} = this.state;
    return(
      <div className="content-card timer-card">
        <h1 className="title">Tea timer</h1>
        <Clock totalSeconds={count} status={countdownStatus}/>
        {renderStartStop()}
      </div>
    )
  }

这不应该通过

if（this.props.location.query.seconds）

检查来缓解吗

---

我只发布了相关的部分，因为这个组件有点大，但是如果你需要更多的信息，整个组件就是。如果需要一些关键信息以便我更新问题，也请发表意见。

因此，这里有几点需要注意：

第一个问题是初始检查是错误的-我首先需要检查this.props是否是一个对象，以及它是否在任何地方嵌套了seconds键。所以我修改了componentDidMount方法：

componentDidMount() {
    let seconds = 0;

    if(this.props.location.query.seconds) {
     seconds = parseInt(this.props.location.query.seconds, 10);
    }

    if (seconds > 0) {
      this.setState({count:seconds});
      window.location.hash = '#/timer';
    }
  }

  componentDidMount() {
    // function for checking if an argument is a object
    let isObj = (variable) => (variable !== null) && (typeof variable === 'object');
    // function for checking if an object has a specific nested key
    let objHasKey = (obj, key) => {
      return isObj(obj) ? (key in obj) || Object.values(obj).filter(nestedObj => objHasKey(nestedObj, key)).length > 0 : false;
    };

    let seconds = 0;
    if(objHasKey(this.props, 'seconds')) {
     seconds = parseInt(this.props.location.query.seconds, 10);
    }
    if (seconds > 0) {
      this.setState({count:seconds});
      window.location.hash = '#/timer';
    }
  }

然后，我将测试分为两类，一类是向组件传递道具时，另一类是不传递道具时：

  it('pass state countdownStatus to Clock as status', () => {
    const wrapper = mount(<Timer />);
    const status = wrapper.state('countdownStatus');
    expect(wrapper.find('Clock').prop('status')).toEqual(status);
  });
  it('set this.props.location.query.seconds as state.count when passed', () => {
    const mockUrl = {
      query : {
        seconds: '100'
      }
    }
    const wrapper = mount(<Timer location={mockUrl}/>);
    expect(wrapper.state('count')).toEqual(100);
  })

it（'passstate countdownStatus to Clock as status'，（）=>{
const wrapper=mount（）；
const status=wrapper.state（'countdownStatus'）；
expect（wrapper.find（'Clock'）.prop（'status'））.toEqual（status）；
});
它（'将this.props.location.query.seconds设置为state.count when passed'，（）=>{
常量mockUrl={
查询：{
秒：“100”
}
}
const wrapper=mount（）；
expect（wrapper.state（'count'））.toEqual（100）；
})

  componentDidMount() {
    // function for checking if an argument is a object
    let isObj = (variable) => (variable !== null) && (typeof variable === 'object');
    // function for checking if an object has a specific nested key
    let objHasKey = (obj, key) => {
      return isObj(obj) ? (key in obj) || Object.values(obj).filter(nestedObj => objHasKey(nestedObj, key)).length > 0 : false;
    };

    let seconds = 0;
    if(objHasKey(this.props, 'seconds')) {
     seconds = parseInt(this.props.location.query.seconds, 10);
    }
    if (seconds > 0) {
      this.setState({count:seconds});
      window.location.hash = '#/timer';
    }
  }

  it('pass state countdownStatus to Clock as status', () => {
    const wrapper = mount(<Timer />);
    const status = wrapper.state('countdownStatus');
    expect(wrapper.find('Clock').prop('status')).toEqual(status);
  });
  it('set this.props.location.query.seconds as state.count when passed', () => {
    const mockUrl = {
      query : {
        seconds: '100'
      }
    }
    const wrapper = mount(<Timer location={mockUrl}/>);
    expect(wrapper.state('count')).toEqual(100);
  })