Réaction des paramètres du routeur v4 à l'intérieur du test unitaire lors du montage

Question

J'ai un composant React avec des paramètres d'URL. Lorsque je lance le test et monte le composant, les paramètres sont toujours indéfinis et, par conséquent, interrompent le test. J'ai essayé de les coder en dur comme des constantes, des accessoires et ça ne marchera toujours pas. D'autres idées que je peux essayer?

import React, { Component } from 'react'; 

class BarcodePage extends Component { 
    constructor(props) { 
     super(props); 
    } 
    componentDidMount() { 
     const { SKU, ID } = this.props.match.params 
    } 
    render() { 
     return (
      <h1>Barcode view {SKU} {ID}</h1> 
     ); 
    } 
} 

export default BarcodePage; 


import React from 'react'; 
import { shallow } from 'enzyme'; 
import BarcodePage from './BarcodePage'; 

const component = mount(
    <BarcodePage params={{SKU: '1111', ID: '2121212' }} /> 
); 

describe('<BarcodePage />',() => { 
    it('render one header',() => { 
    expect(component.find('h1').length).toBe(1); 
    }); 
}) 

Answer 1

React Router offre et votre code utilise this.props.match.params, pas this.props.params. Vous passez les mauvaises accessoires à votre test unitaire:

<BarcodePage params={{SKU: '1111', ID: '2121212' }} /> 

Cela vous donne this.props.params, mais il devrait être this.props.match.params:

<BarcodePage match={{params: {SKU: '1111', ID: '2121212' }}} />