React:使用url参数中断测试

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;

注意:我有一个构造函数，当我不认为它是需要的原因是因为我在react文档中读到，没有构造函数的this.props将是未定义的。

Answer 1

我是这样做的

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);
  });
})