TypesOfFood
component is already rendering a component called Vegetables
. Also, there is the Fruits
component from the last challenge.
Nest two components inside of Fruits
— first NonCitrus
, and then Citrus
. Both of these components are provided for you in the background. Next, nest the Fruits
class component into the TypesOfFood
component, below the h1
header and above Vegetables
. The result should be a series of nested components, which uses two different component types.
TypesOfFood
component should return a single div
element.
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: The TypesOfFood
component should return the Fruits
component.
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: The Fruits
component should return the NonCitrus
component and the Citrus
component.
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: The TypesOfFood
component should return the Vegetables
component below the Fruits
component.
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.');
```