如何使用react-intl、react-router-dom v4和TypeScript对React组件进行单元测试

npm install react-intl react-router-dom @types/react-intl @types/react-router-dom jest enzyme enzyme-adapter-react-16 enzyme-to-json --save-dev

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';

const MyComponent: React.FC = () => {
  return (
    <div>
      <FormattedMessage id="hello" defaultMessage="Hello, World!" />
      <Link to="/about">About</Link>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { shallow } from 'enzyme';
import { createMemoryHistory } from 'history';
import { IntlProvider } from 'react-intl';
import { Router } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders without crashing', () => {
    const history = createMemoryHistory();
    const wrapper = shallow(
      <IntlProvider locale="en">
        <Router history={history}>
          <MyComponent />
        </Router>
      </IntlProvider>
    );
    expect(wrapper.exists()).toBe(true);
  });

  it('renders correct text', () => {
    const history = createMemoryHistory();
    const wrapper = shallow(
      <IntlProvider locale="en">
        <Router history={history}>
          <MyComponent />
        </Router>
      </IntlProvider>
    );
    expect(wrapper.find('FormattedMessage').prop('defaultMessage')).toBe('Hello, World!');
  });

  it('navigates to /about on link click', () => {
    const history = createMemoryHistory();
    const wrapper = shallow(
      <IntlProvider locale="en">
        <Router history={history}>
          <MyComponent />
        </Router>
      </IntlProvider>
    );
    wrapper.find('Link').simulate('click');
    expect(history.location.pathname).toBe('/about');
  });
});