問題 - 無法讀取屬性「XXX」的未定義

Question

我收到錯誤使用下面的測試案例：

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

你應該通過合適的物業爲您的組件，在你r的情況是​​其中包含另一個對象的屬性調用weatherIconCode

如果您更改代碼如下，它應該工作。

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