Question

我已经使用React和React路由器实现了一个包含Route的App组件：

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

import createHeader from './components/header/header';
import createLandingPage from './components/landing-page/landing-page';
import createFooter from './components/footer/footer';

export default React => () => {
  const Header = createHeader(React);
  const LandingPage = createLandingPage(React);
  const Footer = createFooter(React);

return (
    <section id="sectionId">
      <Header />
      <Router>
        <Route exact path="/" component={LandingPage} />
      </Router>
      <Footer />
    </section>
  );
};

应用程序本身呈现并正常工作，因为我可以访问我的浏览器并按预期查看所有内容。

当我尝试实现正确的测试时会出现问题，该测试在没有浏览器的Node.js中运行：

import test from 'tape';
import dom from 'cheerio';
import React from 'react';
import reactDom from 'react-dom/server';
import { MemoryRouter } from 'react-router';

import createApp from './app';

const render = reactDom.renderToStaticMarkup;

test('App init & render', assert => {
  const message = 'It sohuld initialize and render the app.';

  const App = createApp(React);
  const $ = dom.load(render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  ));
  const output = $('#jptv').length;

  const actual = output > 0;
  const expected = true;

  assert.equal(actual, expected, message);
  assert.end();
});

我使用MemoryRouter来包装我的应用程序，如React docs所示，以避免错误，但无论有没有，我在控制台中运行测试时都会遇到同样的错误：

不变违规：浏览器历史记录需要DOM

我的猜测是我无法使用浏览器中的BrowserRouter运行组件，但我不明白测试它的正确方法是什么，因为我不想强迫自己操纵代码以适应测试环境的缺点。

我在网上搜索并查看了类似的问题，但我找不到答案，如果没有有用的信息可以解决这个问题，那么文档几乎没有。

任何帮助都将非常感激。谢谢！

如何测试React路由器没有错误？

0 个答案: