React：url paramを使用してテストを中断する

Question

urlパラメータを使用するコンポーネントの単体テストを記述しています。

BarcodePage line 14: TypeError: Cannot read property 'name' of undefined 

ここにテストコード：

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

const component = shallow(
    <BarcodePage /> 
); 

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

コンポーネントは、テストが失敗しているにもかかわらず、正常に動作するようですが、それはビルドを中断しますのですが

テストは、常にこのエラーで失敗しています私の実装がわからなくなってしまいます。 部品コード：

import React, { Component } from 'react'; 

    class BarcodePage extends Component { 
     constructor(props) { 
     super(props); 
     } 
     render() { 
     return (
      <h1>Barcode view {this.props.params.name}</h1> 
     ); 
     } 
    } 

    export default BarcodePage; 

注：私は、コンストラクタなしthis.propsが未定義になることに反応ドキュメントを読み込むので、私は、私はそれが必要だとは思わないとき、コンストラクタを持っている理由があります。

Answer 1

これは、私はあなたが `paramsはを渡さいけないので、私はそれが失敗だと信じて、それは

Barcode.js

import React, { Component, PropTypes } from 'react'; 

class BarcodePage extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <h1>Barcode view {this.props.params.name}</h1> 
    ); 
    } 
} 

BarcodePage.propTypes = { 
    params: PropTypes.object 
}; 

BarcodePage.defaultProps = { 
    params: { 
    name: 'Default Name' 
    } 
}; 

export default BarcodePage; 

BarcodePage.test.js

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

const component = shallow(
    <BarcodePage /> 
); 

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