酶单元测试中的 Typescript 错误说 LocationDescriptor 类型上不存在路径名<unknown>

Question

在单元测试中，我使用typescript和enzyme 。 我正在测试从react-router-dom的Link组件。 测试运行良好，但typescript一直抱怨LocationDescriptor类型中不存在路径名：

类型“LocationDescriptor”上不存在属性“pathname” | （（位置：位置）=> LocationDescriptor）'。 类型“字符串”上不存在属性“路径名”。

路径名确实存在，但我不明白原因是什么。 我认为该错误与react-router-dom类型或ShallowWrapper ，但我不确定该怎么做。 有人可以告诉我如何摆脱错误并解释错误的含义吗？ 非常感谢。

测试：

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

考试科目：

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 enzyme方法都是 TypeScript 泛型方法，像这样prop<T>(key: string): T; . 由于Link组件的to props是object，所以可以使用history包的LocationDescriptorObject类型作为泛型参数。

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

测试结果：

 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

包版本：

"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使用"history": "^4.9.0"作为其依赖项。