Sooraj
Sooraj

Reputation: 10567

Getting text value from React Element child in enzyme

I have the following component as part of my large component.

<UI.Field
   horizontal
     value={
       <FormattedNumber
         style="currency"
         currency="EUR"
         data-service-fee
         value={booking.service_fee_cents || 8000 / 100}
       />
       }
      label={`${base}service_fee`}
      />

I'm writing tests for the component.

it('renders default value if service fee is null', () => {
      wrapper.setProps({
        booking: {
          ...make(booking),
          service_fee_cents: null,
        },
      })
      expect(wrapper.find('[data-service-fee]').text()).toBe('€80.00')
    })

What I'm trying to do is to get the value inside the field named data-service-fee. But wrapper.find('[data-service-fee]') always return null.

When I tried wrapper.find('[label*="service_fee"]').text() it return the component itself instead of text ?

What am I doing wrong ?

Upvotes: 1

Views: 1068

Answers (1)

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6289

You can get the prop of a component using prop method on the ShallowWrapper.

Any DOM element attribute could also be retrieved using prop.

wrapper.prop('data-service-fee') should give you the value.

Reference - ShallowWrapper.prop()

Upvotes: 1

Related Questions