text(str) assertion doesn't support custom component

[ZaherMustapha]

For example:
A Number: {card.number}

If I write the test for the previous JSX code:

it('should have a CardText displaying A Number', () => {
    const cardTextNumber = component.find('CardText')
    expect(cardTextNumber).to.have.text('A Number: 1234')
})

Sadly, it seems like custom components are not supported. I am getting the following error:

expected the node in to have text 'A Number: 1234', but it has ''

[ljharb]

How did you create component?

[ZaherMustapha]

beforeEach(() => {
    props = {
      number: {
        name: 'hello',
        number: 1234
      }
    }
    component = shallow(<Something {...props} />)
  })

[ljharb]

Ok, so it's shallow-rendered - that explicitly means that custom components inside it aren't rendered. Try const cardTextNumber = component.find('CardText').shallow();

[ZaherMustapha]

I am getting this following error: Method “shallow” is only meant to be run on a single node. 3 found instead.

[ljharb]

Then you'll have to disambiguate your find first.

[ZaherMustapha]

We just want to validate content of a custom component which we can easily access (as you can see in the example)... The thing is that the component is working perfectly fine and we do not want to start testing it by rendering it...

[ljharb]

If there are 3 CardText components, you can't validate them. Add an assertion in your test that you've only found 1 item, and then you'll be able to assert things on it.

[ZaherMustapha]

I only have a CardTitle and a CardText...

[ljharb]

I'd recommend using .debug() to clarify exactly what gets rendered. Perhaps you could also share the implementation of Something?

[ZaherMustapha]

JSX:
<Card style={{ backgroundColor: 'white' }} data-id='aDataId'> <CardTitle title='cardTitle' /> <CardText>A Number: {card.number}</CardText> </Card>

Test:

beforeEach(() => {
    props = {
      testNumber: {
        name: 'random name',
        number: 1234
      }
    }
    component = shallow(<Something {...props} />)
  })

it('should have a CardText displaying A Number', () => {
const card = component.find('Card[data-id="aDataId"]').shallow()
    const cardTextNumber = card.find('CardText')
    expect(cardTextNumber).to.have.text('A Number: 1234')
})

[ljharb]

Ok, then CardText doesn't have any text - it has a children prop which is the text you're looking for. (Text is something a rendered component has)

Try asserting on .props().children instead.

[ZaherMustapha]

Yeah that was my initial solution but I have to fragment the test like this to make it work:

it('should have a CardText displaying A Number', () => {
   const card = component.find('Card[data-id="aDataId"]').shallow()
   const cardTextNumber = card.find('CardText').get(0).props

   expect(cardTextNumber.children[0]).to.deep.equal('A Number: ')
   expect(cardTextNumber.children[1]).to.deep.equal(1234)
})

I wasn't sure if it was the best way to do it thats why I opened this issue...

[ljharb]

Yes, that's currently the best way to do it (no .get(0) tho, just .props() should do it).

You can also do shallow(<div>{cardTextNumber.children}</div>).text().

This is effectively an "issue" with enzyme itself, not with chai-enzyme; we should move this conversation to enzymejs/enzyme#692