我有一个简单的测试案例，在这里我检查FormInput是否存在。我在终端得到以下结果
Expected length: 1
Received length: 0
Received object: {}
这里是测试用例。我还做了一个wrapper.debug()来看看我作为wrapper得到了什么。
it('renders FormInput component', () => {
console.log(wrapper.debug())
expect(wrapper.find(FormInput)).toHaveLength(1)
})
下面是console.log的结果，你可以看到FormInput是存在的，但是测试用例还是失败了。你可以看到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();
})