React访问匹配对象的querystring参数

Question

我正在尝试针对各种查询字符串选项测试React组件。这是我的测试代码的简化版本。

import { Provider } from 'react-redux';
import { act, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
const defaultProps = {
match: { params: { id: 1 } },
};
act(async () => {
render(
<Provider store={mockStore()}>
<Router>
<ComponentToTest {...defaultProps} />
</Router>
</Provider>
);
});

然而，匹配对象以某种方式被覆盖(我怀疑是路由器(到：

{ path: '/', url: '/', params: {}, isExact: true }

ComponentToTest正在寻找匹配作为顶级属性。

export const ComponentToTest = ({ match, history }) => {
// Stuff here which uses redux, match and history
};

我应该如何将匹配数据传递到此组件？

感谢

Answer 1

解决了它。

My ComponentToTest有一个默认导出，使用Router:

export const ComponentToTest = ({ match, history }) => {
// Stuff here which uses redux, match and history
};
export default withRouter(ComponentToTest);

我把那个导入到我的测试中，而不是简单的那个。

例如

进行

import { ComponentToTest } from './index';

而不是

import ComponentToTest from './index';

修复它。