NotFoundPage返回

Question

我尝试用Jest和Enzyme测试我的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td> <select> <option class="option" value="1">1</option> <option class="option" value="2">2</option> <option class="option" value="3">3</option> </select> </td> <td><p id='total'>699</p></td> <script> $(function(){ $('select').on("change",function(){ var total =699; $('select').each(function(){ total*= parseInt($(this).val()); }); $('#total').html('$'+total); }); }); </script>组件：

AppRouter

这是我的import React from 'react'; import ReactDOM from 'react-dom'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router'; import AppRouter from './../src/components/AppRouter'; import Home from './../src/components/Home'; import NotFoundPage from './../src/components/NotFoundPage'; describe('App Router', () => { it('should go to 404 page', () => { const wrapper = mount( <MemoryRouter initialEntries={[ '/random' ]}> <AppRouter /> </MemoryRouter> ); expect(wrapper.contains(<Home />)).toBe(false); expect(wrapper.contains(<NotFoundPage />)).toBe(true); }) }) 组件：

AppRouter

这是测试日志：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import NotFoundPage from './NotFoundPage';

const AppRouter = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

使用● App Router › should go to 404 page expect(received).toBe(expected) Expected value to be (using Object.is): true Received: false 15 | console.log(wrapper.contains(<AppRouter />)); 16 | expect(wrapper.contains(<Home />)).toBe(false); > 17 | expect(wrapper.contains(<NotFoundPage />)).toBe(true); 18 | }) 19 | }) 20 | at Object.<anonymous> (__tests__/appRouter.test.js:17:91) ，我必须获得initialEntries={[ '/random' ]}。

有什么想法吗？

Answer 1

正如我所料，这是一种误解。它适用于以下代码：

入口点组件：

/* global document */
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

import AppRouter from './components/AppRouter';

render(
  <Router>
    <AppRouter />
  </Router>,
  document.getElementById('app'),
);

AppRouter组件：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import World from './World';
import NotFoundPage from './NotFoundPage';

const AppRouter = () => (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/world" component={World} />
        <Route path="*" component={NotFoundPage} />
      </Switch>
    </div>
);

export default AppRouter;

AppRouter测试：

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

import AppRouter from './../src/components/AppRouter';
import Home from './../src/components/Home';
import World from './../src/components/World';
import NotFoundPage from './../src/components/NotFoundPage';

describe('App Router', () => {
  it('should go to 404 page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={[ '/random' ]} initialIndex={0}>
        <AppRouter />
      </MemoryRouter>
    );
    expect(wrapper.find(NotFoundPage)).toHaveLength(1);
    expect(wrapper.find(Home)).toHaveLength(0);
    expect(wrapper.find(World)).toHaveLength(0);
  });

  it('should go to world page', () => {
    const wrapper = mount(
      <MemoryRouter initialEntries={[ '/world' ]} initialIndex={0}>
        <AppRouter />
      </MemoryRouter>
    );
    expect(wrapper.find(Home)).toHaveLength(0);
    expect(wrapper.find(World)).toHaveLength(1);
  });
})

为了测试您的应用程序的路由，您必须使用MemoryRouter来模拟react-router-dom的BrowserRouter。

但是你必须小心处理路由而不是处理要测试的组件中的BrowserRouter。