Typescript error in Enzyme unit-tests saying pathname doesn't exist on type LocationDescriptor<unknown>

Question

In the unit-tests, I'm using typescript and enzyme . I'm testing a Link component, which I took from the react-router-dom . The test runs fine, but typescript keeps complaining that the pathname doesn't exist in the LocationDescriptor type:

Property 'pathname' does not exist on type 'LocationDescriptor | ((location: Location) => LocationDescriptor)'. Property 'pathname' does not exist on type 'string'.

The pathname does exist but I don't understand what the cause is. I think the error has something to do with react-router-dom types or the ShallowWrapper , but I'm not sure what to do. Can someone please tell me how to get rid of the error and explain what the error means? Many Thanks.

Test:

import React from 'react';
import { Link } from 'react-router-dom';
import { shallow, ShallowWrapper } from 'enzyme';
import { Order } from '.';
...

it('Order cards by default using date in descending', () => {
  const component: ShallowWrapper = shallow(
    <Order {...props} />
  );

  const links = component.find(Link);

  expect(links.at(0).prop('to').pathname).toEqual(
    '/order/DIGITAL/1111'
  );
});

Test subject:

import React from 'react';
...

export const Order = (props: OrderProps) => {
  ...
  return (
    <Link
      key={props.order.orderId}
      to={{
        pathname: `/order/${props.order.brand}/${props.order.orderId}`,
        state: { securityAddressed: true },
      }}
      className="order-history-link"
    >
      <Card
        key={props.order.orderId}
        title1={title1}
        title2={!isEmpty(props.order) && getOrderDetails(props.order)}
      />
    </Link>
  );
};

Answer 1

.prop(key) => Any method of enzyme is TypeScript generic method, like this prop<T>(key: string): T; . Since the to props of Link component is object, you can use the LocationDescriptorObject type of history package as the generic parameter.

Order.tsx :

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

interface OrderProps {
  order: {
    orderId: string;
    brand: string;
  };
}
export const Order = (props: OrderProps) => {
  return (
    <Link
      key={props.order.orderId}
      to={{
        pathname: `/order/${props.order.brand}/${props.order.orderId}`,
        state: { securityAddressed: true },
      }}
      className="order-history-link"
    ></Link>
  );
};

Order.test.tsx :

import React from 'react';
import { Link } from 'react-router-dom';
import { shallow, ShallowWrapper } from 'enzyme';
import { Order } from './Order';
import { LocationDescriptorObject } from 'history';

it('Order cards by default using date in descending', () => {
  const props = { order: { orderId: '1111', brand: 'DIGITAL' } };
  const component: ShallowWrapper = shallow(<Order {...props} />);
  const links = component.find(Link);
  const toProps = links.at(0).prop<LocationDescriptorObject>('to');
  expect(toProps.pathname).toEqual('/order/DIGITAL/1111');
});

test result:

 PASS  examples/69536616/Order.test.tsx (10.367 s)
  ✓ Order cards by default using date in descending (22 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 Order.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.244 s

package versions:

"jest": "^26.6.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"react": "^16.14.0",
"react-router-dom": "^5.2.0",

react-router-dom@5.2.0 use "history": "^4.9.0" as its dependency.