Question

使用 jest 时出现的问题 - 无法读取未定义的属性“xxx”

2017-09-12

8701

javascript reactjs jestjs enzyme

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

 Cannot read property 'weatherIconCode' of undefined

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

非常欢迎任何有关如何解决问题的想法并附上简要说明。

组件：

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()
  })
})