Question

如何测试用于向组件属性提供组件的匿名函数？如果不能开玩笑地测试匿名函数，那应该怎么做？

<BrowserRouter>
    <Switch>
        <Route path={routerPath1} component={props => <MyComponent1 {...props} customProperty={BlaBlaBla} />
        <Route path={routerPath2} component={props => <MyComponent2 {...props} customProperty={BlaBlaBla} />
    </Switch>
</BrowserRouter>

component={props => <MyComponent2 {...props} customProperty={BlaBlaBla} /> is not accessible by test.

Answer 1

首先，BrowserRouter不应在单元测试中使用。组件的层次结构应允许改为使用MemoryRouter。然后可以通过更改路线来测试路线组件。

或者，可以分别访问和测试匿名功能：

const RouteComponent = wrapper.find(Route).at(0).props().component;
const routeComponentWrapper = shallow(<RouteComponent/>);
...

可以通过将代码干燥来提高可测试性。由于两条路径中的组件相似，因此可以通过添加customProperty={BlaBlaBla} prop的单个高阶组件来创建它们，并且可以在测试中对其进行监视。

开玩笑如何覆盖在React路由器中使用的匿名功能？

1 个答案: