lundi 9 décembre 2019

How to test a React component which depends on URL search parameters like ?foo=bar?

I have a few components in the app, that require URL parameters (document.location.search). Depending on the values of those params each component could produce a different output. Let's say, if ?color=tomato, the component should have a child: Hello tomato!, otherwise it should render default Hello world! child.

I am also using ConnectedRouter and react-testing-library, if that will help.

Sample test is written below:

import React from 'react'
import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'

import SampleComponent from './SampleComponent'

import store, { history } from '../../store/store'

test('loads and displays orgStatus', () => {
  const { debug } = render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <SampleComponent />
      </ConnectedRouter>
    </Provider>
  )

  debug()
})

And my question is how can I set the search parameter in the test case file?

Aucun commentaire:

Enregistrer un commentaire