如何在 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;