реагировать тест маршрутизатора запускается из не дома - PullRequest
Новая
       153

реагировать тест маршрутизатора запускается из не дома

0 голосов
/ 07 августа 2020

Я тестирую свой компонент приложения, и в первом тесте он запускается из дома, и мне нужно нажать на предварительный просмотр напитка, чтобы перейти к рецепту. Однако в следующем тесте, который должен выполнить те же действия, чтобы перейти к рецепту, я получаю сообщение об ошибке

Невозможно найти элемент по: [data-testid = "drink-preview "]

Я понял, что это потому, что кажется, что он уже начинается с рецепта, поэтому он не отображает домашнюю страницу, чтобы щелкнуть по предварительному просмотру напитка. Просто чтобы быть уверенным, что я скопировал точно такой же тест, который проходил из дома -> нажмите «напиток-предварительный просмотр» -> рецепт, и, конечно же, во второй раз у него такая же проблема. Журнал ошибок показывает, что он сразу отображает рецепт, а не домой, поэтому не может найти напиток, чтобы щелкнуть по нему. 

test('should contain default texts in recipe -HOW TO MIX etc.', () => {
  
  const { container, getAllByTestId, getByTestId } = renderWithRouterRedux(<App />)
  
  fireEvent.click(getAllByTestId('drink-preview')[0])
  
  expect(container).toHaveTextContent('HOW TO MIX')
  expect(container).toHaveTextContent('Glass')
  expect(container).toHaveTextContent('Method')
  expect(container).toHaveTextContent('Garnish')
})

export const renderWithRouterRedux= (component, { initialState, store = createStore(reducer, initialState) } = {}) => {
  const history = createMemoryHistory()
  return {
    ...render(<Provider store={store}>
      <Router history={history}>
        {component}
      </Router>
    </Provider>),
    store,
  }
}

Почему возникает такое поведение?

1 Ответ

0 голосов
/ 12 августа 2020

Проблема, похоже, заключалась в том, что в моем тестировании я визуализировал свое {component} приложение в BrowserRouter на двух уровнях; уровень тестирования и в качестве первого дочернего элемента компонента приложения.

Исходный 

//App component
<div className="App" data-testid="app">
 <BrowserRouter>
      <Switch>
        <Route path="/">
          <SomeComponent/>
        </Route>
      </Switch>
    </BrowserRouter>
</div>

//index.js
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById('root')
)

На вершине компонента приложения, уже имеющего BrowserRouter, я выполнял рендеринг в тесте файл в маршрутизаторе снова, c он не нужен.

Решением было переместить в index. js, чтобы он обертывал при рендеринге в браузере. Это также позволяет мне использовать в тестах, чтобы безопасно обернуть компонент приложения

Решение 

//App component
<div className="App" data-testid="app">
    <Switch>
        <Route path="/">
          <SomeComponent/>
        </Route>
    </Switch>
</div>

//index.js
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)

Это видео школы Rithm о тестировании React- Роутер дал мне эврику

...