React-router：使用酶在`render` prop內部進行測試

Question

我想測試從/ path到語言環境路徑的重定向（例如/en ）。 所以這是組件的樣子：

// GuessLocale is imported from a helper
const App = () => (
<Router>
  <Switch>
    <Route exact path='/' render={() => (
      <Redirect to={`/${guessLocale()}`} />
    )} />
    <Route exact path='/:lang' component={Home} />
  </Switch>
</Router>
)

這是目前的測試功能：

it('redirects to a localed path', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  )

  expect(wrapper.find('Redirect')).toHaveLength(1)
})

顯然，測試失敗，因為Redirect組件在子項內部作為Route的render prop的函數

在測試中，我將App包裝在內存路由器中，但在App組件中，瀏覽器路由器已經存在，所以我可能需要重構它。

但即使在Routes組件中分割的路由，我也不知道如何在render道具中進行測試。

Answer 1

您可以通過檢查重定向后應該呈現的組件來測試這一點，在這種情況下， Home組件如下所示：

it('redirects to a localed path', () => {
  let wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <Switch>
        <Route exact path='/' render={() => (
          <Redirect to={`/en`} />
        )} />
        <Route path='/en' component={Home} />
        <Route render={() => "not found"} />
      </Switch>
    </MemoryRouter>
  )



  expect(wrapper.find(Home)).toHaveLength(1)
})

我不得不刪除<Router>以使其正常工作，因為我們沒有將它用於瀏覽器。 另一種方法是檢查位置prop中的<Route> pathname屬性。 看這里：

it('redirects to a localed path', () => {
  let wrapper = mount(
    <MemoryRouter initialEntries={['/']}>
      <Switch>
        <Route exact path='/' render={() => (
          <Redirect to={`/en`} />
        )} />
        <Route path='/en' component={Home} />
        <Route render={() => "not found"} />
      </Switch>
    </MemoryRouter>
  )



  expect(wrapper.find("Route").prop('location').pathname).to.equal("/en")
})