4

私が使用して解決した古いバージョンのreact-routerを使用しているときに、過去にこの問題がありました：stubRouterContext +コンポーネントインスタンスにアクセスするハックな方法（参照を使用：https ://github.com/reactjs/react-router/issues/ 1140#issuecomment-113174774 )

これは将来改善されると思っていましたが、react-router 2.0 で同じ壁にぶつかっています (これが react-router の問題だと言っているわけではありませんが、コンテキストを使用するため、テストに影響します)。したがって、コンテキストを使用して新しい状態を URL にプッシュするコンポーネントがありthis.context.router.push(...)ます 。 #プログラマティック ナビゲーション

私は言っていますjest.dontMock('react-router')が、私のテストは次のように失敗します:

TypeError: Cannot read property 'push' of undefined

これは、によって返されるインスタンスが次のようになるために発生しますTestUtils.renderIntoDocument。

context: Object { router: undefined }

さて、ここで本当の問題は何ですか？ジェストですか？これに遭遇したのは私だけではないと確信しています.stubRouterContext以来、react-routerの公式ドキュメントにはもうありません.これに対する広く受け入れられている解決策はありますか?

テストを機能させるにはどうすればよいですか？これは、基本的に正しいコンテキストを持ち、によって返されるコンポーネント インスタンスからすべてにアクセスできることTestUtils.renderIntoDocumentです。

反応 0.14.7、jest-cli 0.8.2、および反応ルーター 2.0 を使用しています。

4

2 に答える 2

0

同じ問題があり、単体テストで this.context.history が未定義でした。

スタック: React 0.14、react-router 1.0、履歴 1.14、ジャスミン 2.4

次の方法で解決しました。

反応ルーターの履歴には、ハッシュなしでリンクを許可する"history/lib/createBrowserHistory"を使用します。このモジュールはシングルトンです。つまり、一度作成すると、すべてのアプリで使用できます。そこで、次の方法で History mixin を破棄し、別のコンポーネントから直接 history を使用することにしました。

// history.js

import createBrowserHistory from 'history/lib/createBrowserHistory'
export default createBrowserHistory()


// app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'

import history from './history'
import Main from './Main'

const Layout = React.createClass({
  render() {
    return <div>{React.cloneElement(this.props.children)}</div>
  }
})

const routes = (
  <Route component={Layout} path='/'>
    <IndexRoute component={Main} />
  </Route>
)

ReactDOM.render(
  <Router history={history}>{routes}</Router>, 
  document.getElementById('my-app')
)


// Main.js

import React from 'react'
import history from './history'

const Main = React.createClass({
  next() {
    history.push('/next_page')
  },

  render() {
    return <button onClick={this.next}>{'Go to next page'}</button>
  }
})

export default Main

魔法のように機能し、簡単にテストできます。ミックスインもコンテキストもありません (少なくともこの特定のケースでは)。標準のreact-routerブラウザー履歴にも同じアプローチを使用できると思いますが、チェックしませんでした。

于 2016-03-29T11:17:19.610 に答える