0

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

エラーを回避するためにReact ドキュメントMemoryRouterに示されているようにアプリをラップしていましたが、コンソールでテストを実行すると同じエラーが発生します。

不変違反: ブラウザーの履歴には DOM が必要です

私の推測ではBrowserRouter、ブラウザーを使用してコンポーネントを実行することはできませんが、テスト環境に合わせてコードを操作することを強制したくないため、それをテストする適切な方法がわかりません。欠点。

Web を検索して同様の問題を調べましたが、答えが見つかりません。ドキュメントには、これに対処するための有用な情報はほとんどありません。

どんな助けでも大歓迎です。ありがとう!

4

0 に答える 0