it-swarm.com.de

Wie testest du einen Router, der mit Jest und Enzym übereinstimmt?

Angenommen, ich habe die folgende Komponente, die ich aus https://www.codeday.top/2017/11/08/56644.html herausgegriffen habe. Hier verwende ich match.params, um auf die ID zuzugreifen. Wie schreibe ich einen Komponententest für diese Komponente, testet das Vorhandensein des h2-Elements mit Jest + Enzyme + TypeScript + React.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Link, match } from 'react-router-dom';

// define React components for multiple pages
class Home extends React.Component<any, any> {
  render() {
    return (
      <div>
        <div>HOME</div>
        <div><Link to='/details/id123'>Goto Details</Link></div>
      </div>);
  }
}

interface DetailParams {
  id: string;
}

interface DetailsProps {
  required: string;
  match?: match<DetailParams>;
}

class Details extends React.Component<DetailsProps, any> {
  render() {
    const match = this.props.match;
    if (match) {
      return (
        <div>
          <h2>Details for {match.params.id}</h2>
          <Link to='/'>Goto Home</Link>
        </div>
      );
    } else {
      return (
        <div>
          <div>Error Will Robinson</div>
          <Link to='/'>Goto Home</Link>
        </div>
      )
    }
  }
}

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/details/:id" component={(props) => <Details required="some string" {...props} />} />
    </div>
  </Router>

  , document.getElementById('root')
);
6
vanegeek

Verwenden Sie containsMatchingElement

const wrapper = shallow(
  <Details
    required={true}
    match={{params: {id: 1}, isExact: true, path: "", url: ""}}
  />
);
expect(wrapper.containsMatchingElement(<h2>Details for 1</h2>)).toBeTruthy();
3
paibamboo

Alle Tests im Kontext einschließen

Der Router ist im Kontext vorhanden, sodass Sie Ihre Tests im Kontext zusammenfassen und Übereinstimmungsparameter angeben können, um zu testen, wie Ihre Komponente sie aufnimmt.

import { BrowserRouter } from 'react-router-dom';
import { shape } from 'prop-types';

// Instantiate router context
const router = (route) = ({
  history: new BrowserRouter().history,
  route,
});

const createContext = (route) => ({
  context: { router(route) },
  childContextTypes: { router: shape({}) },
});

export function mountWrap(node, route) {
  return mount(node, createContext(route));
}

Beispiel beschreiben:

import React from 'react';
import { TableC } from '../../src/tablec';
import { mountWrap, shallowWrap } from '../testhelp/contextWrap';
import { expectedProps } from './mockdata'

describe('Table', () => {
  let props;
  let component;
  let route = {
    location: {},
    match: {[MATCH OBJ HERE]}
  }

  const wrappedMount = () => mountWrap(<TableC {...props} />, route);

  beforeEach(() => {
    props = {
      query: {
        data: tableData,
        refetch: jest.fn(),
      },
    };
    if (component) component.unmount();
  });

  test('should call a DeepTable with correct props', () => {
    let route = {
      location: {},
      match: {[UPDATE MATCH OBJ HERE BEFORE TEST]}
    }
    const wrapper = wrappedMount();
    expect(wrapper.find('DeepTable').props()).toEqual(expectedProps);
  });

});

Auf diese Weise können Sie optional weitere Dinge zum Kontext hinzufügen und das Objekt der obersten Ebene im Wrapper kann Ihre Komponente sein (im Gegensatz zum Umbrechen mit BrowserRouter oder StaticRouter).

0
Steve Banton