web-dev-qa-db-fra.com

Comment tester un composant React avec RouteComponentProps?

J'ai un composant qui a des accessoires qui étendent RouteComponentProps qui ressemble à ceci:

export interface RouteComponentProps<P> {
  match: match<P>;
  location: H.Location;
  history: H.History;
  staticContext?: any;
}

Maintenant, lorsque j'utilise mon composant dans l'application, je lui transmets ces accessoires:

<MyComponent
    match={this.props.match}
    location={this.props.location}
    history={this.props.history}
/>

Les accessoires sont déjà disponibles car ils fonctionnent dans le routeur de réaction.

Maintenant, comment puis-je tester ce composant sans que match, location, history soit disponible?

Dois-je me moquer d'eux ou est-il censé les charger automatiquement avec une fonction d'assistance?

reactjstypescripttestingreact-routerjestjs
7
Sergei Basharov

Si vous utilisez Jest (ou une autre) bibliothèque moqueuse, vous pouvez fournir un simulacre simple et le test réussira - l'exemple ci-dessous utilise jest:

test('renders without crashing', () => {

    let mock: any = jest.fn();

    const wrapper = enzyme.mount(
        <TeamSetupApp
            match = {mock}
            location = {mock}
            history= {mock} />
      );

    expect(wrapper).not.toBeNull();
});

De toute évidence, si vous souhaitez utiliser des éléments de correspondance, d'emplacement ou d'historique dans votre test pour que le code suive un chemin particulier, la correspondance/emplacement/historique doit être simulé séparément et en fonction des besoins.

5
Farskeptic

Je cherchais une bonne solution à cela. J'espérais pouvoir le faire dans la fonction mapStateToProps ou quelque chose de similaire, mais je n'ai pas encore pu le faire.

Le mieux que je pouvais faire était de me moquer de cela et de passer dans le match, le lieu et l'histoire. J'ai utilisé ce qui suit:

import { RouteComponentProps } from 'react-router'
import { match } from 'react-router-dom';
import {UnregisterCallback, Href} from 'history'

export function getMockRouterProps<P>(data: P) {

    var location: {
            hash: "",
            key: "",
            pathname: "",
            search: "",
            state: {}
        };

    var props: RouteComponentProps<P> = {
    match: {
            isExact: true,
            params: data,
            path: "",
            url: ""
        },
        location: location,
        history: {
            length:2,
            action:"POP",
            location: location,
            Push: () => {},
            replace: () => {},
            go: (num) => {},
            goBack: () => {},
            goForward: () => {},
            block: (t) => {
                var temp: UnregisterCallback = null;
                return temp;
            },
            createHref: (t) => {
                var temp: Href = "";
                return temp;
            },
            listen: (t) => {
                var temp: UnregisterCallback = null;
                return temp;
            }

        },
        staticContext: {
        }
    };


    return props;
}

Puis dans mon test j'ai fait:

    var routerProps = getMockRouterProps<ReduxTestComponentProps>(null);

    const wrapper = mount<ReduxTestComponent, ReduxTestComponentState>(
            <ReduxTestComponent
                history={routerProps.history}
                location={routerProps.location}
                match={routerProps.match}
                isLoadingTodo={false}
                todos={todos}
                addAsyncTodoActionDispatch={() => mockTodoAddDispatch()}
                deleteTodoActionDispatch={() => mockTodoDeleteDispatch()}
                />
      );
1
Aziz