Почему тестирование компонента не выполняется?

Question

Я пытаюсь написать тесты для следующего компонента

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>
         ................

Мой тестовый код

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

Ошибка заключается в следующем, когда я запускаю свой шутный тест

 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 | 

Я не уверен, почему тест не пройден, мне нужно сделать что-то конкретное с данными, полученными через реквизит.Пожалуйста, сообщите

Answer 1

Компонент пытается прочитать несколько реквизитов, но вы не прошли ни одного из них: shallow(<LoanApplication/>).

Вы должны либо:

a) указать defaultProps:

LoanApplication.defaultProps = {
  data: {...}
}

или:

b) пройти некоторые значения в тесте:

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