Nsryjdtyk

I am trying to write tests for the following component

class LoanApplication extends Component {

    constructor(props) {

        super(props);

    }



    canApplyLoan = () => {

        const {dob, nric, loanAmount, selectedLoanTerm, selectedLoanType, fullName} = this.props.data;

        return dob.length && nric.length && loanAmount.length && loanAmount > '0' && selectedLoanTerm.length && selectedLoanType.length && fullName.length;

    };



    render() {

        this.props.data.enableLoanForm = this.canApplyLoan();

        return (

            <div className='mainApplication'>

                <h4>Apply for a Loan</h4>

                <form onSubmit={this.props.loanSubmission} className='loanApp'>

                    <div className="form-group">

                        <label htmlFor="exampleInputFullName">Full Name</label>

                        <input type="text" className="form-control" id="exampleInputFullName"

                               aria-describedby="fullNameInfo" placeholder="Enter Full Name"

                               onChange={this.props.fullNameChange}/>

                    </div>

                    <div className="form-group">

                        <label htmlFor="datepicker">Date Of Birth</label>

                        <input type="date" id="datepicker" aria-describedby="dobInfo" className="form-control"

                               placeholder="DOB" onChange={this.props.dobChange}/>

                    </div>



                    <button className='btn loanBtn' disabled={!this.props.data.enableLoanForm}>Submit

                    </button>

                </form>

         ................

My test code

import React from 'react';

import { shallow, mount, render } from 'enzyme';

import LoanApplication from '../LoanApplication';



describe('LoanApplicationComponent', () => {

    it('should render without throwing error', () => {

        expect(shallow(<LoanApplication/>).find('form.loanApp').exists()).toBe(true);

    });

});

The error is the following, when I run my jest test

 FAIL  src/components/__tests__/LoanApplication-test.js

  ● LoanApplicationComponent › should render without throwing error



    TypeError: Cannot read property 'dob' of undefined



       7 | 

       8 |     canApplyLoan = () => {

    >  9 |         const {dob, nric, loanAmount, selectedLoanTerm, selectedLoanType, fullName} = this.props.data;

         |                ^

      10 |         return dob.length && nric.length && loanAmount.length && loanAmount > '0' && selectedLoanTerm.length && selectedLoanType.length && fullName.length;

      11 |     };

      12 | 

I am not sure why test is failing, do I need to do something specific the data that is being received through the props. Please advise

Component tries to read bunch of props but you have passed none of them:
shallow(<LoanApplication/>).

You should either:

a) specify defaultProps:

LoanApplication.defaultProps = {

  data: {...}

}

or:

b) pass some values in test:

shallow(<LoanApplication data={...} />))