根据道具测试React路由渲染不同的组件

Question

我有一个React Route，它根据返回的数据的长度是否为0来呈现无结果消息或项目列表。我用Jest创建了一个测试套件，该套件可以运行，但是我觉得它过于冗长。会有更好的方法吗？

Content.js（反应组件）

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测试文件）

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)
    })
})