如何测试路由器匹配参数与JEST和酶

Question

说我有以下组件，我从https://www.codeday.top/2017/11/11/08/56644.html抓取了以下组件。在这里，我使用match.params访问ID。我将如何使用开玩笑 酶 typecript 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')
);

Answer 1

使用包含matchingElement

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

Answer 2

将所有测试包装在上下文

中

路由器存在于上下文中，因此您可以将测试包装在上下文中并供应匹配参数以测试组件如何拾取它们。

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

示例描述：

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

这还允许您选择将其他内容添加到上下文中，并允许包装器中的顶级对象是您的组件(而不是用browserrouter或staticrouter包装(

Answer 3

const wrapper = mount(
  <MemoryRouter initialEntries={['/1234']}>
    <Route exact path="/:id/" component={Details} />
  </MemoryRouter>
);