在 React 中全局模拟 Jest/Enzyme 中的函数

Question

我经常将函数导入到 React 组件中，并想使用 jest/enzyme 进行测试。

通常，我可以通过wrapper.instance().functionName访问组件中定义的函数，然后测试该函数是否已被调用。同样，在测试中安装组件时，我可以将模拟函数作为 props 传递，然后检查该组件是否已被调用。但是，我没有测试导入到组件中的函数的方法（未在内部定义或作为 props 定义）。

有没有办法使用 jest/enzyme 定义将在组件测试中使用的全局模拟函数，该函数将覆盖已导入到我正在测试的组件中的同名函数的实现？

Answer 1

是的，这是可能的。

有许多不同的方法可以模拟模块或模块内的单个函数。

这是一个例子：

库.js

export const importedFunc = () => 'original';

代码.js

import * as React from 'react';
import { importedFunc } from './lib';

export class SimpleComponent extends React.Component {
  render() {
    return (<div>{ importedFunc() }</div>);
  }
}

代码.test.js

import * as React from 'react';
import { shallow } from 'enzyme';
import * as lib from './lib';
import { SimpleComponent } from './code';

test('SimpleComponent', () => {
  const spy = jest.spyOn(lib, 'importedFunc');
  spy.mockReturnValue('mocked');
  const wrapper = shallow(<SimpleComponent />);
  expect(wrapper.html()).toBe('<div>mocked</div>');  // Success!
  expect(spy).toHaveBeenCalled();  // Success!
});

jest.spyOn将函数包装在间谍中，您可以使用其任何方法（例如mockReturnValue、mockImplementation等）更改间谍的行为方式。

jest.mock让您模拟整个模块。

手动模拟允许您创建可跨测试使用的模块模拟​​。