Testowanie przelotki Komponent warstwowy - reaktsy, testowanie, enzym, kratka

Używam przelotki, aby zareagować na renderowanieinterfejs użytkownika aplikacji. Po kliknięciu przycisku wyświetla się komponent warstwy. Wszystko działa dobrze, ale nie wiem, jak przetestować dzieci warstwy. Używam enzymu, mokki i chai jako zestawu testowego. Oto kod mojego komponentu:

<Layer align="right" closer>
<Header size="large" justify="between" align="center">
<Button icon={<CloseIcon />} plain={true} onClick={ props.hide }/>
</Header>
<Section key={index} pad={{ horizontal: "large", vertical: "small" }}>
{ props.list }
</Section>
</Layer>

i to jest mój test:

const wrapper = shallow(<MyComponent />);
const layer = wrapper.find(Layer);

//this works
expect(layer).to.have.length.of(1);

const section = layer.find(Section);

//and this fails
expect(section).to.have.length.of(1);

Patrząc na renderowany komponent w aplikacji, zauważyłem, że przelotka renderuje jego komponent Layer w następujący sposób:

<Layer><span style={{ display: "none"}}></span></Layer>

Czy ktoś może mi pomóc? Dziękuję Ci

Odpowiedzi:

Jeśli spojrzeć na kod źródłowy dla komponentu warstwy, zobaczysz, że zwraca zakres opublikowany w metodzie renderowania. To nie jest dopóki komponent nie zamontuje, że zawartość warstwy zostanie zrenderowana dzwoniąc do addLayer metoda w Layer klasa.

Uważam, że powinieneś używać enzymów mount funkcja w celu przetestowania, czy warstwa poprawnie wyświetla swoją zawartość, ponieważ będziesz potrzebować componentDidMount wywoływana metoda.