如何在 React 中使用 jest.mock

Question

有没有办法在 React 中使用jest.mock ？ 例如，假设我想重用一个组件（例如 Storybook），但想模拟该原始 React 组件的导入/实现细节。 这是可能的，如果是，如何？ 谢谢！

示例组件.js：

import React from 'react';
import sampleFn from './sampleFn';

const SampleComponent = () => <h1>{sampleFn()}</h1>; // expected output: 'Hello World'

export default SampleComponent;

sampleMockComponent.js：

import React from 'react';
import SampleMockComponent from './sampleComponent';

jest.mock('./sampleFn');

const SampleMockComponent = () => <SampleComponent />; // expected output: 'Testing Mock'

示例Fn.js：

export default () => 'Hello World';

__mocks__/sampleFn.js：

export default () => 'Testing Mock';

Answer 1

如果你想模拟不是为了测试的原因。 我不建议你使用 jest mocks。

寻找依赖注入模式。

import React from 'react';
import sampleFn from './sampleFn';

// Unless sample is supplied, sampleFn will be used by default
const SampleComponent = () => {
  const { sample = sampleFn } = props;

  return <h1>{sample()}</h1>;
}

export default SampleComponent;