Question

我有一个React项目，我在其中使用react-loadable在路由级别拆分代码。我也在使用Redux来管理应用程序的商店。

我要寻找的是使用Jest＆Enzyme来测试我的路由的方法（对于我正在使用connected-react-router和react-loadable进行代码拆分的路由）。

以下路线的示例：

import Loadable from 'react-loadable';
const AsyncExampleScreen = Loadable({
    loader: () => import("ExampleScreen"),
    loading: LoadingComponent
});
<Route 
    exact 
    path='/' 
    component={AsyncExampleScreen} 
/>

我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import configureStore, { history } from 'store';
import { ConnectedRouter } from 'connected-react-router';
import App from 'App';
const STORE = configureStore();
const render = () => {
     ReactDOM.render(
        <Provider store={STORE}>
           <ConnectedRouter history={history}>
              <App />
           </ConnectedRouter>
        </Provider>,
        document.getElementById('root')
    );
}
render();`

测试示例（在我未使用react-loadable进行路由级别拆分的情况下）

import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router';
import { Provider } from 'react-redux';
import configureStore, { history } from 'store';
import App from 'App';
import Example from 'ExampleScreen';
const STORE = configureStore();
describe('routes using memory router', () => {
    it('should show Home component for route /', () => {
      const component = mount( <MemoryRouter initialEntries = {['/']} >
        <Provider store={STORE}>
            <App />
        </Provider>
     </MemoryRouter>
    );
    expect(component.find(Example)).toHaveLength(1);
    })
})

如何使用笑话和酶来测试代码拆分（使用react-loadable在路由级别进行代码拆分）

0 个答案: