CODEWITHSUNDEEP
reactjsunit-testing
kaur
kaur

Reputation: 11

how to test a component with props

import React from 'react'

const View = ({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>
))

} export default View;

** bparray has 3 objects sysbp, diabp and date, bpStatus, when i am testing this view component it gives me error** 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

import React from "react"; import {fireEvent, render, screen} from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect" import {Enzyme, configure, shallow} from 'enzyme'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() }); import View from "./View";

describe("check the state changes after button click", ()=>{

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

})

Upvotes: 0

Views: 192

Answers (1)

Hanchen Jiang
Hanchen Jiang

Reputation: 2682

Your test is missing the bpArrays for the View component:

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

Upvotes: 0

Related Questions