Reactjs 已返回NotFoundPage

我试着用笑话和酶来测试我的

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

这是测试日志：

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

● 应用程序路由器›应转到404页
预期（已收到）。托比（预期）
预期值为（使用Object.is）：
真的
收到：
假的
15 | console.log（wrapper.contains（））；
16 | expect（wrapper.contains（））.toBe（false）；
>17 | expect（wrapper.contains（））.toBe（true）；
18 |   })
19 | })
20 |
反对。（uuu tests_uuu/appRouter.test.js:17:91）

使用

initialEntries={['/random']}

我必须获得一个

NotFoundPage

---

有什么想法吗？

正如我所料，这是一个误会。它使用以下代码：

入口点组件：

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;

/* 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'),
);

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;

/*全局文档*/
从“React”导入React；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router}；
从“./components/AppRouter”导入AppRouter；
渲染(
,
document.getElementById（'app'），
);

批准人组成部分：

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;

/* 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'),
);

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;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./主页”导入主页；
从“./世界”导入世界；
从“./NotFoundPage”导入NotFoundPage；
常量批准器=（）=>(
);
导出默认批准程序；

认可测试：

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

从“React”导入React；
从“react dom”导入react dom；
从“酶”导入{mount}；
从'react router dom'导入{MemoryRouter}；
从“/../src/components/AppRouter”导入AppRouter；
从“/../src/components/Home”导入主目录；
从“/../src/components/World”导入世界；
从“/../src/components/NotFoundPage”导入NotFoundPage；
描述（'应用路由器'，（）=>{
它（'应该转到404页'，（）=>{
常量包装器=装入(
);
expect（wrapper.find（NotFoundPage））.toHaveLength（1）；
expect（wrapper.find（Home））.toHaveLength（0）；
expect（wrapper.find（World））.toHaveLength（0）；
});
它（'应该进入世界页面'，（）=>{
常量包装器=装入(
);
expect（wrapper.find（Home））.toHaveLength（0）；
expect（wrapper.find（World））.toHaveLength（1）；
});
})

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

---

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

尝试添加

这仍然不起作用。我想这是因为我试图找到一个React组件，而我只能找到一个DOM元素。当我按类名查找（在文章后面添加）以获得长度时，这是有效的。