Perché l'enzima non trova "tr" in una tabella? - javascript, reactjs, enzima

Sto scrivendo alcuni test usando enzyme ma ho un comportamento strano. Ecco il mio test:

  import React from "react"
import { TypeTable } from "routes/Type/components/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)
})

Il primo test funziona. Il secondo non funziona (l'asserzione non riesce: expected { Object (root, unrendered, ...) } to have a length of 2 but got 0)

Ma nel mio secondo test, se stampo il contenuto del mio _wrapper utilizzando console.log(_wrapper.html()) ottengo

"<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>"

Che sembra essere ok e che contiene diversi tr.

Mi sono perso qualcosa?

risposte:

shallow non "rendering" sottocomponenti. È usato per testare un singolo componente e non i suoi figli. Penso che usando mount invece di shallow ti permetterà di testare ciò che desideri.

Il rendering superficiale è utile per costringere te stesso a testare un componente come unità e per garantire che i tuoi test non affermino indirettamente il comportamento dei componenti figlio.