Jest / Enzyme: Ошибка: Uncaught [TypeError: Невозможно прочитать свойство 'query' of undefined] для компонента, заключенного в withRouter

Question

Итак, у меня есть компонент, который обернут в withRouter для доступа к this.props.router.query и генерирует следующую ошибку:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29 Error: Uncaught [TypeError: Cannot read property 'query' of undefined]

Какрешить это?Мой компонент выглядит следующим образом:

import { withRouter } from 'next/router';

class Order extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { onToken } = this.props.router.query;

    return (
      .......
    );
  }
}

export default withRouter(Order);

А мой Order.test.js компонент выглядит следующим образом:

import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
import { fakeOrder } from '../lib/testUtils';

const mocks = [
  {
    request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } },
    result: { data: { order: fakeOrder() } },
  },
];

describe('<Order/>', () => {
  it('renders the order', async () => {
    const wrapper = mount(
      <MockedProvider mocks={mocks}>
        <Order id="ord123" />
      </MockedProvider>
    );
    await wait();
    wrapper.update();
    const order = wrapper.find('div[data-test="order"]');
    expect(toJSON(order)).toMatchSnapshot();
  });
});

Answer 1

В модульных тестах пакет маршрутизатора или withRouter не имеет никакого значения, поскольку мы тестируем только компонент.

Чтобы исправить это, вместо экспорта упакованного компонента вы можете экспортировать отдельный компоненттоже:

import { withRouter } from 'next/router';

export class Order extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { onToken } = this.props.router.query;

    return (
      .......
    );
  }
}

export default withRouter(Order);

и используйте этот экземпляр для модульного тестирования.

import { Order, SINGLE_ORDER_QUERY } from '../components/Order';
import { fakeOrder } from '../lib/testUtils';

const mocks = [
  {
    request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } },
    result: { data: { order: fakeOrder() } },
  },
];

describe('<Order/>', () => {
  it('renders the order', async () => {
    const router = {
      query: {
        onToken: 1 // Whatever value you want to provide it
      }
    }
    const wrapper = mount(
      <MockedProvider mocks={mocks}>
        <Order id="ord123" router={router} />
      </MockedProvider>
    );
    await wait();
    wrapper.update();
    const order = wrapper.find('div[data-test="order"]');
    expect(toJSON(order)).toMatchSnapshot();
  });
});