TypesOfFood
ya está representando un componente llamado Vegetables
. Además, está el componente Fruits
del último desafío. Anide dos componentes dentro de Fruits
: primero NonCitrus
y luego Citrus
. Ambos componentes se proporcionan para usted en el fondo. A continuación, anide el componente de la clase Fruits
en el componente TypesOfFood
, debajo del encabezado h1
y encima de Vegetables
. El resultado debe ser una serie de componentes anidados, que utiliza dos tipos de componentes diferentes. TypesOfFood
debe devolver un ú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: El componente TypesOfFood
debe devolver el 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: El componente Fruits
debe devolver el componente NonCitrus
y el 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: El componente TypesOfFood
debe devolver el componente Vegetables
debajo del 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.");'
```