Test jednotky pro Reagovat složka obsahující useRouteMatch

Byste měli použít <MemoryRouter>:

A <Router> to udržuje historii svých "URL" v paměti (není číst nebo zapisovat do adresního řádku)

Poskytnout mock umístění v historii zásobníku pomocí initialEntries rekvizity.

Pak, použití <Route> komponenty k tomu, aby nějaký UI, když je jeho cesta se shoduje s aktuální URL.

Následující příklad, za předpokladu, že místo cesta v prohlížeči, současná historie zásobníku je /one, <Route>'s path vrtule je také /oneDva odpovídající, vykreslování MyComponent.

E. g.

my-component.tsx:

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useRouteMatch, Link } from 'react-router-dom';

interface MyComponentProps {
  myId?: string;
  link?: string;
}

export const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myId = 'default-id', link, children }) => {
  const [myOutlet, setMyOutlet] = useState<HTMLOListElement>();
  const match = useRouteMatch();
  console.log('match: ', match);

  useEffect(() => {
    const outletElement = document.getElementById(myId) as HTMLOListElement;
    if (outletElement) {
      setMyOutlet(outletElement);
    }
  }, [myId]);

  if (!myOutlet) {
    return null;
  }

  return createPortal(
    <li>
      <Link to={link || match.url}>{children}</Link>
    </li>,
    myOutlet
  );
};

export default MyComponent;

my-component.test.tsx:

import React from 'react';
import { render, screen } from '@testing-library/react';

import { MyComponent } from './my-component';
import { MemoryRouter, Route } from 'react-router-dom';

describe('MyComponent', () => {
  const testId = 'default-id';
  const link = '/route';
  it('should render MyComponent successfully', () => {
    const element = render(
      <MemoryRouter initialEntries={[{ pathname: '/one' }]}>
        <Route path="/one">
          <MyComponent myId={testId} link={link} />
        </Route>
      </MemoryRouter>
    );
    expect(element).toBeTruthy();
  });
});

výsledek testu:

 PASS  examples/70077434/my-component.test.tsx (8.433 s)
  MyComponent
    ✓ should render MyComponent successfully (46 ms)

  console.log
    match:  { path: '/one', url: '/one', isExact: true, params: {} }

      at MyComponent (examples/70077434/my-component.tsx:13:11)

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |    87.5 |    28.57 |     100 |   86.67 |                   
 my-component.tsx |    87.5 |    28.57 |     100 |   86.67 | 18,26             
------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.951 s, estimated 9 s

balíček verze:

"react": "^16.14.0",
"react-router-dom": "^5.2.0"