Wie testen Sie router match params mit Scherz und Enzym?

Sagen, ich habe folgende Komponente, die ich packte aus https://www.codeday.top/2017/11/08/56644.html. Hier bin ich mit dem match.params Zugriff auf die id. Wie würde ich das schreiben von unit Tests für diese Komponente testet die Präsenz des h2-element ein Scherz+Enzym+Typoskript+Reagieren.

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')
);
InformationsquelleAutor vanegeek | 2018-02-20
  1. 7

    Verwenden containsMatchingElement

    const wrapper = shallow(
  <Details
    required={true}
    match={{params: {id: 1}, isExact: true, path: "", url: ""}}
  />
);
expect(wrapper.containsMatchingElement(<h2>Details for 1</h2>)).toBeTruthy();
    • können Sie verwenden Pfad oder die url zum Speicherort festlegen oder Sie benutzen Sie einfach Fenster.Standort = 'localhost:3000/foo'
    • Ich denke du hast einfach zu liefern match prop. Umwandlung von real-url zu match prop ist die Arbeit der routing-Bibliothek, so dass wir nicht brauchen, um es zu testen.
    • Gibt es eine Methode, um ein match-Objekt anstelle eines hard-Codierung? WiecreateBrowserHistory()
    • Nicht, dass ich bewusst bin, diese doc - github.com/ReactTraining/react-router/blob/master/packages/... - nur sagt uns, wie es zu benutzen, nicht, wie, um es zu schaffen.
    InformationsquelleAutor paibamboo
  2. 2

    Wickeln Alle Tests Im Rahmen

    Router existiert in einem Kontext, so können Sie wickeln Sie Ihre tests in Zusammenhang und liefern match params, um es zu testen, wie Ihre Komponente holt Sie.

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

//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);
  });

});

    Diese können Sie auch Optional anderem Kontext, und ermöglicht die top-level-Objekt in der wrapper um die Komponente (im Gegensatz zur Verpackung mit BrowserRouter oder StaticRouter)

    • scheint so, das sollte die richtige Antwort
    • Sie haben ein Typoskript freundliche version der code für die contextWrap.ts
    • Für ES7, verwenden Sie einen spread-operator auf router(route) ich. e. ...router(route).
    InformationsquelleAutor Steve Banton
Schreibe einen Kommentar