react-router#Router TypeScript Examples

The following examples show how to use react-router#Router. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Base.test.tsx    From mail-my-ballot with Apache License 2.0 6 votes vote down vote up 
test('State Form Without Signature (Wisconsin) works', async () => {
  const history = createMemoryHistory()

  const register = mocked(client, true).register = jest.fn().mockResolvedValue({
    type: 'data',
    data: 'confirmationId',
  })
  mocked(client, true).fetchAnalytics = jest.fn().mockResolvedValue({})
  mocked(client, true).fetchContacts = jest.fn().mockResolvedValue([])

  const renderResult = render(
    <Router history={history}>
      <AddressContainer.Provider initialState={wisconsinAddress}>
        <ContactContainer.Provider initialState={wisconsinContact}>
          <Wisconsin/>
        </ContactContainer.Provider>
      </AddressContainer.Provider>
    </Router>,
    { wrapper: UnstatedContainer }
  )

  fillWithoutSigning(renderResult)

  await wait(
    () => expect(toPath(history.location.pathname, parseQS('')))
      .toEqual<SuccessPath>({id: "confirmationId", oid: "default", type: "success"})
  )
  await wait(() => expect(register).toHaveBeenCalledTimes(1))
})
Example #2
Source File: index.test.tsx    From oasis-wallet-web with Apache License 2.0 6 votes vote down vote up 
describe('<SearchAddress  />', () => {
  it('should match snapshot', () => {
    const component = render(<SearchAddress />)
    expect(component.container.firstChild).toMatchSnapshot()
  })

  it('should display an error on invalid address', async () => {
    const component = render(<SearchAddress />)
    const searchBar = await component.findByTestId('searchaddress')
    userEvent.type(searchBar, 'hello{enter}')
    const errorElem = screen.getByText('errors.invalidAddress')
    expect(errorElem).toBeInTheDocument()
  })

  it('should redirect to the account', async () => {
    const history = createMemoryHistory()
    const pushSpy = jest.spyOn(history, 'push')

    const component = render(
      <Router history={history}>
        <SearchAddress />
      </Router>,
    )

    const searchBar = await component.findByTestId('searchaddress')
    userEvent.type(searchBar, 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk{enter}')
    expect(pushSpy).toHaveBeenCalledWith('/account/oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk')
  })
})
Example #3
Source File: index.test.tsx    From oasis-wallet-web with Apache License 2.0 6 votes vote down vote up 
renderComponent = (
  store: any,
  ref: any,
  transaction: transactionTypes.Transaction,
  network: NetworkType,
) =>
  render(
    <Router history={history}>
      <Provider store={store}>
        <Transaction referenceAddress={ref} transaction={transaction} network={network} />
      </Provider>
    </Router>,
  )
Example #4
Source File: testUtils.tsx    From twilio-voice-notification-app with Apache License 2.0 6 votes vote down vote up 
makeContextWrapper = (
  history: MemoryHistory
): React.FC<{
  children?: ReactNode;
}> => ({ children }) => (
  <Provider store={store}>
    <Router history={history}>
      <HttpProvider>{children}</HttpProvider>
    </Router>
  </Provider>
)
Example #5
Source File: index.tsx    From AIPerf with MIT License 5 votes vote down vote up 
ReactDOM.render(
  (
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <IndexRedirect to="/oview" />
        <Route path="/oview" component={Overview} />
        <Route path="/detail" component={TrialsDetail} />
        {/* test branch */}
      </Route>
    </Router>

  ),
  document.getElementById('root')
);
Example #6
Source File: Router.tsx    From companion-kit with MIT License 5 votes vote down vote up 
AppRouter = observer(function(this: never) {

    const [isMobile, setIsMobile] = React.useState(false);

    React.useEffect(() => {
        const onQueryMatch = ({ matches }: any) => setIsMobile(matches);

        const query = '(max-width: 640px)';
        const mQuery = window.matchMedia(query);

        mQuery.addListener(onQueryMatch);

        onQueryMatch(mQuery);

        return () => {
            mQuery.removeListener(onQueryMatch);
        };
    }, []);

    const userId = AppController.Instance.User?.user?.id;

    return (
        <>
            <Router history={history}>
                <Switch>
                    <Route exact path={Routes.Terms} component={Terms} />
                    <Route exact path={Routes.Privacy} component={Privacy} />
                    { getRouter(isMobile) }
                </Switch>
            </Router>
            <Toaster />
            <ModalRenderer />
            <PromptModal
                model={AppController.Instance.PromptModal}
            />
            <AppActivityContext>
                <AppActivityContext.Consumer>
                    {value => (<ClientTrackerComponent tracker={WebClientTrackerFactory} isActive={value.isActive} userId={userId} />)}
                </AppActivityContext.Consumer>
            </AppActivityContext>
        </>
    );
})