I have a React Route that renders either a no result message or a list of items depending on whether the the length of the returned data is 0 or not. I created a testing suite with Jest, which works, but I feel it's too redundant and long. Could there be a better way to do this?
Content.js (React component)
import React from 'react'
import { Route } from 'react-router-dom'
import Switch from 'react-router-dom/Switch';
import List from './List/List'
import NoResult from './NoResult/NoResult'
import LoadMore from './LoadMore/LoadMore'
const content = (props) => {
return (
<section className="content">
<Switch>
<Route
exact
path="/"
render={() =>
// display no result message if there no result is returned from search
props.searched && props.data.length === 0 ?
<NoResult>
Sorry, no result! Try again :)
</NoResult> :
// display list of items if result is returned
<div>
<List
data={props.data}
favorites={props.favorites}
addToFavorites={props.addToFavorites}
removeFromFavorites={props.removeFromFavorites}
/>
{ // display load more button if the search term has not changed
props.hasMore && props.searchTerm === props.prevSearchTerm ?
<LoadMore loadMore={props.loadMore} /> : null}
</div>
}
/>
<Route
path="/favorites"
render={() =>
// display no favorites message if nothing has been added
props.favorites.length === 0 ?
<NoResult>
You don't have any favorites yet.<br></br>Try adding some!
</NoResult> :
// else display list of favorite items
<List
data={props.favorites}
removeFromFavorites={props.removeFromFavorites}
/>
}
/>
</Switch>
</section>
)
}
export default content
Content.test.js (Jest test file)
import React from 'react'
import { MemoryRouter, Route } from 'react-router';
import { configure, shallow, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import List from './List/List'
import NoResult from './NoResult/NoResult'
import LoadMore from './LoadMore/LoadMore'
configure({ adapter: new Adapter()})
describe('Path /', () => {
it('should render <NoResult /> component when there is no result returned from search', () => {
const mockProps = {
searched: true,
data: [],
}
const wrapper = mount(<MemoryRouter>
<Route
exact
path="/"
render={() =>
// display no result message if there no result is returned from search
mockProps.searched && mockProps.data.length === 0 ?
<NoResult>
Sorry, no result! Try again :)
</NoResult> :
// display list of items if result is returned
<div>
<List
data={mockProps.data}
favorites={mockProps.favorites}
addToFavorites={mockProps.addToFavorites}
removeFromFavorites={mockProps.removeFromFavorites}
/>
{ // display load more button if the search term has not changed
mockProps.hasMore && mockProps.searchTerm === mockProps.prevSearchTerm ?
<LoadMore loadMore={mockProps.loadMore} /> : null}
</div>
}
/>
</MemoryRouter>)
expect(wrapper.find(NoResult)).toHaveLength(1)
})
it('should render <List /> component when there is 1 or more search results', () => {
const mockProps = {
searched: true,
data: [{
id: 0,
images: {
fixed_width: {
width: 200
}
}
}],
favorites: []
}
const wrapper = mount(<MemoryRouter>
<Route
exact
path="/"
render={() =>
// display no result message if there no result is returned from search
mockProps.searched && mockProps.data.length === 0 ?
<NoResult>
Sorry, no result! Try again :)
</NoResult> :
// display list of items if result is returned
<div>
<List
data={mockProps.data}
favorites={mockProps.favorites}
addToFavorites={mockProps.addToFavorites}
removeFromFavorites={mockProps.removeFromFavorites}
/>
{ // display load more button if the search term has not changed
mockProps.hasMore && mockProps.searchTerm === mockProps.prevSearchTerm ?
<LoadMore loadMore={mockProps.loadMore} /> : null}
</div>
}
/>
</MemoryRouter>)
expect(wrapper.find(List)).toHaveLength(1)
})
})
Aucun commentaire:
Enregistrer un commentaire