TypesOfFood
já está renderizando um componente chamado Vegetables
. Além disso, há o componente Fruits
do último desafio. Nest dois componentes dentro de Fruits
- primeiro NonCitrus
e, em seguida, Citrus
. Ambos os componentes são fornecidos para você em segundo plano. Em seguida, aninhe o componente de classe Fruits
no componente TypesOfFood
, abaixo do cabeçalho h1
e acima de Vegetables
. O resultado deve ser uma série de componentes aninhados, que usa dois tipos de componentes diferentes. TypesOfFood
deve retornar um único elemento div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The TypesOfFood
component should return a single div
element.");'
- text: O componente TypesOfFood
deve retornar o componente Fruits
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The TypesOfFood
component should return the Fruits
component.");'
- text: O componente Fruits
deve retornar o componente NonCitrus
e o componente Citrus
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find("Fruits").children().find("NonCitrus").length === 1 && mockedComponent.find("Fruits").children().find("Citrus").length === 1); })(), "The Fruits
component should return the NonCitrus
component and the Citrus
component.");'
- text: O componente TypesOfFood
deve retornar o componente Vegetables
abaixo do componente Fruits
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The TypesOfFood
component should return the Vegetables
component below the Fruits
component.");'
```