React Router v4 paramsがマウント時にユニットテストを中断する

Question

URLパラメータを持つReactコンポーネントがあります。テストを実行してコンポーネントをマウントするとき、パラメータは常に定義されていません。その結果、テストを中断します。私はそれらを定数、小道具としてハードコーディングしようとしましたが、それはまだ動作しません。私が試すことができる他のアイデア？

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

は、ルータが提供し、あなたのコードがthis.props.match.params、ないthis.props.paramsを使用し反応します。あなたthis.props.paramsを与える

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

を、それがthis.props.match.paramsする必要があります：あなたは、あなたのユニットテストに間違った小道具を渡している

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