在安装

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

React Router提供，您的代码使用this.props.match.params，而不是this.props.params。您将错误的道具传递给您的单元测试：

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

这会给你this.props.params，但它应该是this.props.match.params：

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