如何正确测试我的App组件以验证路由是否呈现了正确的组件

如何解决如何正确测试我的App组件以验证路由是否呈现了正确的组件

在我的App组件中，我有一堆路由来渲染它们各自的组件，并且我想测试这些路由是否在渲染正确的组件。

App.js

export default () => {
    return (
        <BrowserRouter>
            <div>
                <Navbar />
            
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/signup' component={Signup} />
                    <Route exact path='/signin' component={Signin} />
                    <Route exact path='/profile' component={Profile} />
                </Switch>
            </div>
        </BrowserRouter>
    );
};

在阅读了一些互联网知识并进行了一些讨论之后，我了解到我可以使用MemoryRouter来检查某个组件是否与给定的路由匹配，如果匹配，则应该返回一个或长度值1。

App.test.js

import React from 'react';
import {  mount } from 'enzyme';
import { MemoryRouter } from 'react-router';

import App from './App';
import { Home } from './home/Home';
import Signup from './auth/signup/Signup';
import Signin from './auth/signin/Signin';

describe('routes using memory router',() => {
    it('should show <Home /> component for "/" route',() => {
        const component = mount(<MemoryRouter initialEntries={["/"]}><App /></MemoryRouter>);

        expect(component.find(Home)).toHaveLength(1);
    });

    it('should show <Signup /> component for "/signup" route',() => {
        const component = mount(<MemoryRouter initialEntries={["/signup"]}><App /></MemoryRouter>);

        expect(component.find(Signup)).toHaveLength(1);
    });

    it('should show <Signin /> component for "/signin" route',() => {
        const component = mount(<MemoryRouter initialEntries={["/signin"]}><App /></MemoryRouter>);

        expect(component.find(Signin)).toHaveLength(1);
    });
});

但是完全出乎我的意料，我收到了这个错误，说找不到商店。对于我正在尝试测试的三个路由，“ /”，“ / signup”和“ / signin”，该消息重复3次。我刚刚在这里复制了第三条消息。

 Could not find "store" in the context of "Connect(withRouter())". Either wrap the root component
 in a <Provider>,or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(withRouter())
 in connect options.

      23 |
      24 |     it('should show <Signin /> component for "/signin" route',() => {
    > 25 |         const component = mount(<MemoryRouter initialEntries={["/signin"]}><App /></MemoryRouter>);
         |                           ^
      26 |
      27 |         expect(component.find(Signin)).toHaveLength(1);
      28 |     });

基于上述方法，如何正确测试路由是否呈现正确的组件？我应该提到这是我的第一次测试，所以我尝试学习。如果问题不清楚，我深表歉意。任何答案或链接，甚至其他方法，将不胜感激。

解决商店问题后出现的新错误

● renders correct routes › should show <Signup /> component for "/signup" route

    expect(received).toHaveLength(expected)

    Expected length: 1
    Received length: 0
    Received object: {}

      40 |         );
      41 |
    > 42 |         expect(wrapper.find(Signup)).toHaveLength(1);
         |                                      ^
      43 |     });
      44 |

      at Object.<anonymous> (src/components/App.test.js:42:38)

对于正在测试的所有路由，都会收到此消息，我只在其中粘贴了一条，除了不同的路由外，其他所有路由都相同。

解决方法

我认为您忘记了将提供商与商店一起添加。 将更改添加到您的 App.test.js 就像这里：

 Project => Properties => Java Build Path => Libraries => Add JAR/Add External JAR

对于新期刊：

使用import React from 'react'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router'; import { Provider } from 'react-redux' import App from './App'; import { Home } from './home/Home'; import Signup from './auth/signup/Signup'; import rootReducer from './reducer'; describe('routes using memory router',() => { let store beforeEach(async () => { store = createReduxStore( rootReducer,) }) it('should show <Home /> component for "/" route',() => { const component = mount(<MemoryRouter initialEntries={["/"]}><Provider store={store}><App /></Provider></MemoryRouter>); expect(component.find(Home)).toHaveLength(1); }); it('should show <Signup /> component for "/signup" route',() => { const component = mount(<MemoryRouter initialEntries={["/signup"]}><Provider store={store}><App /></Provider></MemoryRouter>); expect(component.find(Signup)).toHaveLength(1); }); it('should show <Signin /> component for "/signin" route',() => { const component = mount(<MemoryRouter initialEntries={["/signin"]}><Provider store={store}><App /></Provider></MemoryRouter>); expect(component.find(Signin)).toHaveLength(1); }); }); 选项代替提供者包装组件，如下所示：

wrappingComponent

但是我不确定，