javascript - 使用 Jest 的问题 - 无法读取未定义的属性 'xxx'

Question

我在使用以下测试用例时收到错误:

 Cannot read property 'weatherIconCode' of undefined

我正在将 weatherIconCode 传递给测试用例中的组件，但我不明白为什么会出现 undefined。

非常欢迎任何想法如何通过简短的解释来解决。

组件:

import React, {Component} from 'react'
import IconWeather from '../../shared/icon/IconWeather'

class SummaryChartIcon extends Component {
  render () {
    const { cx, cy, payload: {weatherIconCode} } = this.props
    return (
      <svg x={cx - 10} y={cy + 20}>
        <foreignObject width='100%' height='100%'>
          <IconWeather code={weatherIconCode} />
        </foreignObject>
      </svg>
    )
  }
}
export default SummaryChartIcon

测试用例:

import React from 'react'
import {shallow} from 'enzyme'
import toJson from 'enzyme-to-json'
import SummaryChartIcon from './SummaryChartIcon'

describe('<SummaryChartIcon />', () => {
  it('should render', () => {
    const wrapper = shallow(
      <SummaryChartIcon weatherIconCode={200} />
      )
    expect(toJson(wrapper)).toMatchSnapshot()
  })
})

Answer 1

您应该为您的组件传递正确的属性，在您的情况下是 payload，它包含另一个使用属性 weatherIconCode 调用的对象

如果您按以下方式更改代码，它应该可以工作。

describe('<SummaryChartIcon />', () => {
  it('should render', () => {
    const wrapper = shallow(
      <SummaryChartIcon payload={{weatherIconCode: 200}} />
      )
    console.log(wrapper.debug())
    expect(toJson(wrapper)).toMatchSnapshot()
  })
})