如何使用 props 测试组件

Question

从“反应”导入反应

常量视图 = ({bpArrays}) => { return bpArrays.slice([-1]).map((bpArray, index) =>(

    <div key={index} >
        <p >Systolic Pressure: {bpArray.sysbp}</p><br/>
        <p>Diastolic Pressure: {bpArray.diabp}</p><br/>
    <p>Date: {bpArray.atDate}</p><br/>
        <p>Blood Pressure Status is on:  {bpArray.status}</p>
    </div>
))   

} 导出默认视图；

** bparray 有 3 个对象 sysbp、diabp 和日期、bpStatus，当我测试这个视图组件时它给了我错误** TypeError: Cannot read properties of undefined (reading 'slice')

  2 |
  3 | const View = ({bpArrays}) => {
> 4 |     return bpArrays.slice([-1]).map((bpArray, index) =>(
    |                     ^
  5 |
  6 |         <div key={index} >
  7 |             <p >Systolic Pressure: {bpArray.sysbp}</p><br/>

  at View (src/final/View.js:4:21)


test file is look like this

从“反应”导入反应； 从“@testing-library/react”导入{fireEvent，render，screen}； 导入“@testing-library/jest-dom/extend-expect” 从“酶”导入{酶，配置，浅}； 从'@wojtekmaj/enzyme-adapter-react-17'导入适配器；

配置（{适配器：新适配器（）}）； 从“./View”导入视图；

describe("检查按钮点击后的状态变化", ()=>{

test('check button click gets the correct values', async() => {
    const wrapper = shallow(<View/>);
    console.log(wrapper.debug());
  
  })

})

Answer 1

您的测试缺少View 组件的bpArrays：

const wrapper = shallow(<View bpArrays={[]} />);