Jest模拟连接组件的静态方法的返回值答案

【问题标题】：Jest mocking return value of a static method of connected componentJest模拟连接组件的静态方法的返回值
【发布时间】：2020-06-01 03:30:27
【问题描述】：

我正在用 jest 和酵素对我的 React 应用程序进行单元测试，一切都很好，直到我碰巧测试了一个与 Redux 连接的类组件。我继续通过用 a 包裹组件然后浅安装它来测试它。但是我无法模拟连接组件中定义的静态方法的返回值。

下面是我的示例代码：

const wrapper = shallow(
    <Provider store={store}>
        <TestComponent {...props}  />
    </Provider>
).dive();

现在，当我尝试模拟 TestComponent 中定义的静态方法的返回值时，它没有任何效果，它失败了：

TestComponent.myStaticMethod = jest.fn().mockReturnValue(true);

有趣的是，如果我在 redux 文档中将未连接的组件也导出为 suggested，则上述模拟语法效果很好。仅出于测试目的而导出未连接的组件是否可以？我尝试在浅层之前嘲弄，然后在浅层之后嘲弄，两种方式都行不通。

【问题讨论】：

您遇到了麻烦，因为您违反了测试的哲学目的。组件中的任何内容都不需要被模拟。只有外部依赖。如果内部 static 需要注入模拟值，则表明它不属于 TestComponent

标签： reactjs unit-testing redux jestjs enzyme

【解决方案1】：

connect 返回一个新组件，因此您不能以这种方式覆盖包装组件的静态方法，（这不是安德鲁说的好主意）

但假设这是您想要做的，您可以从 react-redux 模拟 connect 函数以返回原始组件

然后将它从 mapStateToProps 和 mapDispatchToProps 获得的所有道具作为标准 React 道具传递

import MyComponent from './MyComponent';

jest.mock('react-redux' () => ({
   connect: () => Component => Component
}))

MyComponent.myStaticMethod = jest.fn().mockReturnValue(true);


shallow(<MyComponent {...props}/>)

【讨论】：