wrapper.find not able to find FormInput (ReactJs + Enzyme

Question

I have a simple test case where i check if FormInput is present. I am getting below result in terminal

Expected length: 1
Received length: 0
Received object: {}

And here is the test case. I also did a wrapper.debug() to see what i am getting as wrapper.

it('renders FormInput component', () => {
      console.log(wrapper.debug())
      expect(wrapper.find(FormInput)).toHaveLength(1)
    })

Here is the result of the console.log. You can see FormInput is present in here but still the test case is failing. Any suggestions/ help is appreciated.

import Immutable from 'immutable'

import * as actions from '../actions'

import reducer from '../reducer'
import { InitialState } from '../reducer'
import { payeeUtils } from '../../../utils/payee-utils'
import PayeeRecord from '../../../records/PayeeRecord'

describe('When using payee details Reducer', () => {
  let initialState, state, previousState

  beforeAll(function() {
    initialState = new InitialState()
    state = initialState
  })

  beforeEach(function() {
    previousState = new InitialState(state)
  })

  it('should initialize the state', () => {
    const action = {}
    expect(reducer(undefined, action)).toEqual(initialState)
  })

  it('should set the payees when setPayeesLoadedTo() is called', () => {
    const testData = {
      payees: [
        {
          'id': '10006',
          'defaultFundingAccount': {
            'id': '1001',
            'name': 'Checking 2',
            'accountNumberMasked': '....1235',
            'balance': '$4,045.65',
            'balanceLabel': 'Available balance',
            'selected': false,
            'defaultForCustomer': true,
            'pendingPayments': '547.82',
            'projectedBalance': '$3,497.83',
            'projectedBalanceLabel': 'Projected balance',
            'termsDisplayed': false,
            'sdpEligible': true
          },
          'sendOnDate': '4/23/2018',
          'secureUrlList': [
            {
              'action': 'make-payment',
              'url': '/billpay/payment/make/10005'
            },
            {
              'action': 'get-reminder',
              'url': '/billpay/reminder/10005'
            }
          ],
          displayStatus: true,
          paymentDue: true,
          ebillStatus: 'ACTIVE',
          defaultFundingAccountId: '1001',
          'cuiPaymentHistoryUrl': '/exit/saml;identifier=cui_PayeeHistory;payeeId=10005'
        },
        {
          'id': '20006',
          'defaultFundingAccount': {
            'id': '1002',
            'name': 'Checking 2',
            'accountNumberMasked': '....1235',
            'balance': '$4,045.65',
            'balanceLabel': 'Available balance',
            'selected': false,
            'defaultForCustomer': true,
            'pendingPayments': '547.82',
            'projectedBalance': '$3,497.83',
            'projectedBalanceLabel': 'Projected balance',
            'termsDisplayed': false,
            'sdpEligible': true
          },
          'sendOnDate': '4/23/2018',
          'secureUrlList': [
            {
              'action': 'make-payment',
              'url': '/billpay/payment/make/10005'
            },
            {
              'action': 'get-reminder',
              'url': '/billpay/reminder/10005'
            }
          ],
          displayStatus: false,
          paymentDue: false,
          ebillStatus: 'PENDING_DEACTIVATION',
          defaultFundingAccountId: '1002',
          'cuiPaymentHistoryUrl': '/exit/saml;identifier=cui_PayeeHistory;payeeId=10005'
        }
      ],
      accounts: [
        {
          'id': '1001',
          'name': 'Checking 1',
          'accountNumberMasked': '....1234',
          'balance': '$820.65',
          'balanceLabel': 'Available balance',
          'selected': false,
          'defaultForCustomer': false,
          'termsDisplayed': false,
          'sdpEligible': true,
          'overdraftProtected': true
        },
        {
          'id': '1002',
          'name': 'Checking 2',
          'accountNumberMasked': '....1234',
          'balance': '$820.65',
          'balanceLabel': 'Available balance',
          'selected': false,
          'defaultForCustomer': false,
          'termsDisplayed': false,
          'sdpEligible': true,
          'overdraftProtected': true
        }
      ],
      payeesPaymentAmount: Immutable.Map({})
    }
    const action = actions.setPayees(testData)
    const { payeeData: arrangedPayeeData } = payeeUtils.arrangePayees(testData, {}, 0, state.payees)
    const payees = arrangedPayeeData.payees.map(payee => new PayeeRecord(payee))
    const payee1 = payees.find(payee => payee.id === '10006')
    state = reducer(state, action)
    const { defaultFundingAccount, defaultFundingAccountId, isDefaultFundingAccountIneligible, defaultFundingAccountMaskedNumber, defaultFundingAccountNickname } = payee1
    expect(state.payees).toEqual(Immutable.List(payees))
    expect(state.payeeTabFilterOptions).toEqual(Immutable.List(['payees', 'hiddenPayees', 'payeesWithEbills', 'paymentDue', { defaultFundingAccount, defaultFundingAccountId, isIneligible: isDefaultFundingAccountIneligible, isDefaultFundingAccountIneligible, defaultFundingAccountMaskedNumber, value: isDefaultFundingAccountIneligible ? defaultFundingAccountMaskedNumber : defaultFundingAccountId, defaultFundingAccountNickname }]))
    expect(state.selectedPayeeTabFilterOption).toEqual(undefined)
  })

  it('should set selectedPayeeTabFilterOption when setPayeeTabFilterOption action is called', () => {
    const action = actions.setPayeeTabFilterOption('hiddenPayees')
    state = reducer(state, action)
    expect(state.selectedPayeeTabFilterOption).toEqual('hiddenPayees')
    expect(state.payeesTabSearchValue).toEqual('')
  })

  it('should reset selectedPayeeTabFilterOption bar when resetPayeeTabFilterOption action is called', () => {
    const action = actions.resetPayeeTabFilterOption()
    state = reducer(state, action)
    expect(state.selectedPayeeTabFilterOption).not.toBeDefined()
  })

  it('should set payeesTabSearchValue when setPayeesTabSearchValue action is called', () => {
    const action = actions.setPayeesTabSearchValue('F')
    state = reducer(state, action)
    expect(state.payeesTabSearchValue).toEqual('F')
  })

  it('should reset touched payees when resetTouchedPayees action is called', () => {
    const action = actions.resetTouchedPayees()
    state = reducer(state, action)
    const touchedPayees = state.payees.filter(payee => payee.touched)
    const payeeWithDefaultAccountSetToTrue = state.payees.filter(payee => payee.isDefaultAccount)
    expect(touchedPayees.size).toEqual(0)
    expect(payeeWithDefaultAccountSetToTrue.size).toEqual(0)
  })

  it('should set payees failure message when setPayeesFailureMessage is called', () => {
    const action = actions.setPayeesFailureMessage({
      payments: {
        inProcessPaymentList: [{
          paymentIndex: '1',
          payeeId: '10006',
          failureMessageBean: {
            globalMessages: [],
            fieldMessages: [{
              fieldNames: ['amount'],
              message: 'Please enter amount'
            }]
          }
        }]
      }
    })
    state = reducer(state, action)
    expect(state.payees.get(0).failureMessageBean).toEqual(Immutable.fromJS({
      globalMessages: [],
      fieldMessages: [{
        fieldNames: ['amount'],
        message: 'Please enter amount'
      }]
    }))
  })

  it('should reset all payees failure message when resetPayeesFailureMessage is called', () => {
    const action = actions.resetPayeesFailureMessage()
    state = reducer(state, action)
    const expectedFailureMessageBean = Immutable.fromJS({
      globalMessages: [],
      fieldMessages: []
    })
    state.payees.forEach(payee => {
      expect(payee.failureMessageBean).toEqual(expectedFailureMessageBean)
    })
  })

  it('should disable submit bar when disablePayeesSubmitBar action is called', () => {
    const action = actions.disablePayeesSubmitBar()
    state = reducer(state, action)
    expect(state.enableSubmitBar).toBeFalsy()
  })

  it('should set the changedDefaultFundingAccount and id when setPayeeFundingAccount action is called', () => {
    const payload = { account: Immutable.Map({ id: '4' }), payeeId: '10006', isDefaultAccount: false }
    const action = actions.setPayeeFundingAccount(payload)
    state = reducer(state, action)
    const payee = state.payees.find(payee => payee.id === '10006')
    expect(payee.changedDefaultFundingAccount).toEqual(payload.account)
    expect(payee.changedDefaultFundingAccountId).toBe(payload.account.id)
    expect(payee.isDefaultAccount).toBe(payload.isDefaultAccount)
  })

  it('should increment expeditedPaymentsCount when incrementExpeditedPaymentsCount action is called', () => {
    const action = actions.incrementExpeditedPaymentsCount()
    state = reducer(state, action)
    expect(state.expeditedPaymentsCount).toBe(1)
  })

  it('should decrement expeditedPaymentsCount when decrementExpeditedPaymentsCount action is called', () => {
    const action = actions.decrementExpeditedPaymentsCount()
    state = reducer(state, action)
    expect(state.expeditedPaymentsCount).toBe(0)
  })

  it('sets expeditedPaymentsCount to zero when expeditedPaymentsCount is less than one and decrementExpeditedPaymentsCount action is called', () => {
    const action = actions.decrementExpeditedPaymentsCount()
    state = reducer(state, action)
    expect(state.expeditedPaymentsCount).toBe(0)
  })

  it('should reset expeditedPaymentsCount when resetExpeditedPaymentsCount action is called', () => {
    const action = actions.resetExpeditedPaymentsCount()
    state = state.merge({ expeditedPaymentsCount: 5 })
    expect(state.expeditedPaymentsCount).toBe(5)
    state = reducer(state, action)
    expect(state.expeditedPaymentsCount).toBe(0)
  })

  it('should reset change funding account information when resetChangedAccountTouchedPayeeIds action is called', () => {
    const payload = { account: Immutable.Map({ id: '4' }), payeeId: '10006', isDefaultAccount: false }
    const changeFuncdingAccountAction = actions.setPayeeFundingAccount(payload)
    state = reducer(state, changeFuncdingAccountAction)
    const action = actions.resetChangedAccountTouchedPayeeIds()
    state = reducer(state, action)
    expect(state.payees.filter(payee => payee.changedDefaultFundingAccount).size).toBe(0)
  })

  it('should set send on date field message when PAYEES_SET_PAYEE_CARD_SEND_ON_DATE_FIELD_MESSAGES action is dispatched', () => {
    const payeeId = '10006'
    const fieldMessage = { message: 'mockMessage' }
    const action = actions.setPayeeCardSendOnDateFieldMessage(payeeId, fieldMessage)
    state = reducer(state, action)
    const payeeFieldMessages = state.payees.find(payee => payee.id === payeeId).toJS().failureMessageBean.fieldMessages
    payeeFieldMessages.filter(message => message.message === 'mockMessage')
    expect(payeeFieldMessages.filter(message => message.message === 'mockMessage')).toHaveLength(1)
  })

  it('should reset send on date field message when PAYEES_SET_PAYEE_CARD_SEND_ON_DATE_FIELD_MESSAGES action is dispatched', () => {
    const payeeId = '10006'
    const fieldMessage = { message: 'mockMessage', fieldNames: ['sendOnDate'] }
    const action = actions.setPayeeCardSendOnDateFieldMessage(payeeId, fieldMessage)
    state = reducer(state, action)
    const resetAction = actions.removePayeeCardSendOnDateFieldMessage(payeeId)
    state = reducer(state, resetAction)
    const payeeFieldMessages = state.payees.find(payee => payee.id === payeeId).toJS().failureMessageBean.fieldMessages
    payeeFieldMessages.filter(message => message.message === 'mockMessage')
    expect(payeeFieldMessages.filter(message => message.message === 'mockMessage' && (message.fieldNames || []).indexOf('sendOnDate') >= 0 )).toHaveLength(0)
  })

  it('should set hide zelle option for payee when PAYEES_HIDE_ZELLE_OPTION action is dispatched', () => {
    const payeeId = '10006'
    const action = actions.hideZelleOption(payeeId)
    state = reducer(state, action)
    const updatedPayee = state.payees.find(payee => payee.id === payeeId).toJS()
    expect(updatedPayee.hideZelleOption).toBeTruthy()
  })

  it('should set payee card message when PAYEES_SET_PAYEE_CARD_MESSAGES action is dispatched', () => {
    const payeeId = '10006'
    const mockMessage = { message: 'mockMessage' }
    const action = { type: actions.PAYEES_SET_PAYEE_CARD_MESSAGES, messages: { [payeeId]: mockMessage } }
    state = reducer(state, action)
    const updatedPayee = state.payees.find(payee => payee.id === payeeId).toJS()
    expect(updatedPayee.cardMessages).toEqual(mockMessage)
  })

  it('should add payee to expedited payment payees list when PAYESS_TAB_ADD_EXPEDITE_PAYMENTS_PAYEES_LIST is dispatched', () => {
    const payeeId = '10006'
    const action = { type: actions.PAYESS_TAB_ADD_EXPEDITE_PAYMENTS_PAYEES_LIST, payeeId }
    state = reducer(state, action)
    expect(state.toJS().expeditedPaymentPayeesList.has(payeeId)).toBeTruthy()
  })

  it('should delete payee from expedited payment payees list when PAYESS_TAB_DELETE_EXPEDITE_PAYMENTS_PAYEES_LIST is dispatched', () => {
    const payeeId = '10006'
    const action = { type: actions.PAYESS_TAB_DELETE_EXPEDITE_PAYMENTS_PAYEES_LIST, payeeId }
    state = reducer(state, action)
    expect(state.toJS().expeditedPaymentPayeesList.has(payeeId)).toBeFalsy()
  })

  it('should remove all payee from expedited payment payees list when PAYESS_TAB_CLEAR_EXPEDITE_PAYMENTS_PAYEES_LIST is dispatched', () => {
    const payeeId = '10006'
    state = reducer(state, { type: actions.PAYESS_TAB_ADD_EXPEDITE_PAYMENTS_PAYEES_LIST, payeeId })
    const action = { type: actions.PAYESS_TAB_CLEAR_EXPEDITE_PAYMENTS_PAYEES_LIST }
    state = reducer(state, action)
    expect(state.toJS().expeditedPaymentPayeesList.size).toEqual(0)
  })  
})

Answer 1

It actually depends on how your wrapper is created. If you are using mount you will have to add more code snippet for better understanding. If you are using shallow I see you can face this problem since you are wrapping exported component with a HOC.

 import Memo from './index'; import { shallow } from 'enzyme'; import FormInput from '../../with-dirty-check/FormInput' describe("Memo", () => { //if component is created like below test case won't pass since you have HOC wrapping your actual component (shallow render one level) const wrapper = shallow(<Memo isConfirm={false} />); wrapper.find(FormInput).toExist(); }) //to fix describe("Memo", () => { const wrapper = shallow(<Memo isConfirm={false} />).dive(); wrapper.find(FormInput).toExist(); }) //If you are using mount this should ideally work. describe("Memo", () => { const wrapper = mount(<Memo isConfirm={false} />); wrapper.find(FormInput).toExist(); })