En las pruebas unitarias, estoy usando typescript y enzyme . Estoy probando un componente Link , que tomé del react-router-dom . La prueba funciona bien, pero typescript sigue quejándose de que el nombre de la ruta no existe en el tipo LocationDescriptor :
La propiedad 'pathname' no existe en el tipo 'LocationDescriptor | ((ubicación: Ubicación) => LocationDescriptor)'. La propiedad 'pathname' no existe en el tipo 'string'.
El nombre de la ruta existe, pero no entiendo cuál es la causa. Creo que el error tiene algo que ver con los tipos react-router-dom o ShallowWrapper , pero no estoy seguro de qué hacer. ¿Puede alguien decirme cómo deshacerse del error y explicar qué significa el error? Muchas gracias.
Prueba:
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' ); });Sujeto de prueba:
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 método de enzyme es un método genérico de TypeScript, como este prop<T>(key: string): T; . Dado que los elementos to destino del componente Link son objetos, puede utilizar el tipo de paquete de history LocationDescriptorObject como parámetro genérico.
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'); });resultado de la prueba:
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 sversiones del paquete:
"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" como su dependencia.