Question

我正在为应该使用url param的组件编写单元测试。

测试始终失败并出现此错误：

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

这就是我的工作方式

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

React：使用url param打破测试

1 个答案: