Jest浅组件测试错误

Question

我想浅显示一个组件并检查它是否崩溃。文档告诉我浅层渲染不会深入到子组件中。

我有这段代码：

it("Renders the Compare landing page without crashing", () => {
  shallow(<Compare />);
});

Compare组件包含以下代码：

<Fragment>
        <Sidenav params={this.props.match.params.gamerId} />
        <div className="content-area">
          <SearchBar
            updateSearch={this.updateSearch}
            placeholder={"Filter by Friends"}
          />
          <div className="friends">
            {filteredFriends.map((friend, key) => {
              return (
                <Friend
                  name={friend}
                  key={key}
                  index={key}
                  goToCompare={this.goToCompare}
                />
              );
            })}
          </div>
        </div>
</Fragment>

测试引发以下错误：

测试不应该忽略<SideNav />，我在这里缺少什么？

Answer 1

我的解决方案可能不是最好的，但这就是我所做的：

我为比赛创建了一个模拟函数：

import {match} from 'react-router';

export function mockedMatch<P = void>(params?: P): match<P> {
    return {
        params,
        isExact: true,
        path: 'lorem/ipsum',
        url: 'dummyUrl',
    };
}

然后在测试时将此模拟传递给组件：

shallow(<Compare match={mockedMatch({gamerId: 'test-id'})} />);

我的解决方案是在TypeScript中，但您可以删除类型，它也适用于您的情况。