I'm writting some test using enzyme but I have some weird behavior. Here is my test :

  import React from 'react'
  import { TypeTable } from 'routes/Type/ponents/TypeTable'
  import { shallow } from 'enzyme'
  import { Table } from 'react-toolbox'

  // ...

  let _props, _wrapper

  beforeEach(() => {
    _props = {
      getTypes: sinon.spy(),
      types: [
        { name: 'type 1'},
        { name: 'type 2'}
      ]
    }
    _wrapper = shallow(<TypeTable {..._props} />)
  })

  it('Should render a <Table>', () => {
    expect(_wrapper.is(Table)).to.be.true
  })

  it('should render 2 rows', () => {
    expect(_wrapper.find('tbody').find('tr')).to.have.length(2)
  })

The first test is working. The second one is not working (the assertion is failing : expected { Object (root, unrendered, ...) } to have a length of 2 but got 0)

But in my second test, if I print the content of my _wrapper using console.log(_wrapper.html()) I get

'<table data-react-toolbox="table">
  <thead>
    <tr>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr data-react-toolbox-table="row">
      <td>type 1</td>
    </tr>
    <tr data-react-toolbox-table="row">
      <td>type 2</td>
    </tr>
  </tbody>
</table>'

Which seems to be ok and which contains several tr.

Did I missed something ?

I'm writting some test using enzyme but I have some weird behavior. Here is my test :

  import React from 'react'
  import { TypeTable } from 'routes/Type/ponents/TypeTable'
  import { shallow } from 'enzyme'
  import { Table } from 'react-toolbox'

  // ...

  let _props, _wrapper

  beforeEach(() => {
    _props = {
      getTypes: sinon.spy(),
      types: [
        { name: 'type 1'},
        { name: 'type 2'}
      ]
    }
    _wrapper = shallow(<TypeTable {..._props} />)
  })

  it('Should render a <Table>', () => {
    expect(_wrapper.is(Table)).to.be.true
  })

  it('should render 2 rows', () => {
    expect(_wrapper.find('tbody').find('tr')).to.have.length(2)
  })

The first test is working. The second one is not working (the assertion is failing : expected { Object (root, unrendered, ...) } to have a length of 2 but got 0)

But in my second test, if I print the content of my _wrapper using console.log(_wrapper.html()) I get

'<table data-react-toolbox="table">
  <thead>
    <tr>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr data-react-toolbox-table="row">
      <td>type 1</td>
    </tr>
    <tr data-react-toolbox-table="row">
      <td>type 2</td>
    </tr>
  </tbody>
</table>'

Which seems to be ok and which contains several tr.

Did I missed something ?

• javascript
• reactjs
• enzyme

Share Improve this question Follow asked Oct 24, 2016 at 12:28 ThomasThiebaudThomasThiebaud 12k66 gold badges5656 silver badges7878 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

shallow will not "render" subponents. It is used to test a single ponent and not its children. I think that using mount instead of shallow will let you test what you want.

Shallow rendering is useful to constrain yourself to testing a ponent as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child ponents.