0

我已经使用 React 和 React 路由器实现了一个包含路由的 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 文档中的说明包装我的应用程序以避免错误，但是无论有没有它，在控制台中运行测试时我都会遇到同样的错误：

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

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

我已经在网上搜索并研究了类似的问题，但我找不到答案，而且这些文档几乎没有提供任何有用的信息来处理这个问题。

任何帮助将不胜感激。谢谢！

4

0 回答 0