0
205
VistasBroma: - TypeError: no se pueden leer las propiedades de undefined (leyendo 'parámetros'). Error viniendo en broma
Tengo el siguiente componente en reaccionar. pongo en resumen solamente
export interface EditCertificateProps { id:string; } export function EditCertificate(props: any) { injectStyle(); const {id} = props.match.params; const history = useHistory(); }Cuando estoy haciendo una prueba de broma, arroja un error.
const id = '123'; describe('EditCertificate', () => { const params = { id: '123', }; it('should render successfully', () => { const { baseElement } = render(<EditCertificate id={id} />); expect(baseElement).toBeTruthy(); }); }); esta tirando error 
desde otro componente, esta página se llama como a continuación.
<SecureRoute path="/:id/edit" component={EditCertificate} />Cambié mi caso de prueba como sigue siendo el siguiente error.
describe('EditCertificate', () => { const props = { match: { params: 123, }, }; it('should render successfully', () => { const { baseElement } = render(<EditCertificate {...props.match.params} />); expect(baseElement).toBeTruthy(); }); });que mal estoy haciendo
1 Respuestas
Responde la pregunta0
El componente EditCertificate espera una propiedad de match con una propiedad params .
export function EditCertificate(props: any) { injectStyle(); const {id} = props.match.params; const history = useHistory(); ... } Este accesorio de match debe proporcionarse en la prueba unitaria. Está creando un objeto de accesorios para que pueda distribuirlo en EditCertificate . Distribuya todo el objeto props , no props.match.params , este último solo distribuye los parámetros individuales.
describe('EditCertificate', () => { const props = { match: { params: { id: 123, // <-- props.match.params.id }, }, }; it('should render successfully', () => { const { baseElement } = render(<EditCertificate {...props} />); expect(baseElement).toBeTruthy(); }); }); El próximo problema será un contexto de enrutamiento faltante para el useHistory . Puede proporcionar un wrapper para la utilidad de render o simplemente envolver EditCertificate directamente.
const RouterWrapper = ({ children }) => ( <MemoryRouter>{children}</MemoryRouter> // * ); ... const { baseElement } = render( <EditCertificate {...props} />, { wrapper: RouterWrapper }, );o
const { baseElement } = render( <MemoryRouter> <EditCertificate {...props} /> </MemoryRouter> ); * MemoryRouter utilizado para pruebas unitarias ya que no hay DOM