[英]enzyme wrapper.find(..).simulate keypress doesnt trigger event listener
[英]wrapper.find not able to find FormInput (ReactJs + Enzyme
我有一個簡單的測試用例,我檢查 FormInput 是否存在。 我得到低於終端的結果
Expected length: 1
Received length: 0
Received object: {}
這是測試用例。 我還做了一個 wrapper.debug() 來看看我作為包裝器得到了什么。
it('renders FormInput component', () => {
console.log(wrapper.debug())
expect(wrapper.find(FormInput)).toHaveLength(1)
})
這是 console.log 的結果。 您可以看到 FormInput 出現在此處,但測試用例仍然失敗。 任何建議/幫助表示贊賞。
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)
})
})
這實際上取決於您的包裝器是如何創建的。 如果您使用mount
,您將不得不添加更多代碼片段以便更好地理解。 如果您使用的是shallow
,我看到您可能會遇到這個問題,因為您使用 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(); })
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.