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