reactjs - 使用 Jest 和 Enzyme 进行测试时设置 URL 参数

Question

我的组件有:

 class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm:
        typeof this.props.match.params.searchTerm !== "undefined"
          ? this.props.match.params.searchTerm
          : ""
    };
  }

测试是:

 test("Search should render correct amount of shows", () => {
  const component = shallow(<Search shows={preload.shows} />);
  expect(component.find(ShowCard).length).toEqual(preload.shows.length);
});

我明白

TypeError: Cannot read property 'params' of undefined

如何解决该问题或如何在测试中设置查询参数？

Answer 1

似乎在测试之外，Search 组件正确接收了 match 属性。
在测试中浅层渲染时，您可以将其作为 Prop 传递:

test("Search should render correct amount of shows", () => {
 const match = { params: { searchTerm: 'foo' } }
 const component = shallow(<Search shows={preload.shows} match={match}/>);
 expect(component.find(ShowCard).length).toEqual(preload.shows.length);
});

在这种情况下，您并没有以不好的方式更改被测组件，您的测试用例只是发现了一个错误，这是好的并且应该针对测试，并且您通过实现默认 Prop 改进了组件，使其更加稳健。