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

Question

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

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

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

Answer 1

是的，这是可能的。

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

---

举个例子:

lib.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在 spy 中包装一个函数，你可以改变 spy 的行为方式及其任何 methods例如mockReturnValue , mockImplementation等

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

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