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 を検索して同様の問題を調べましたが、答えが見つかりません。ドキュメントには、これに対処するための有用な情報はほとんどありません。
どんな助けでも大歓迎です。ありがとう!