Question

在React中可以使用jest.mock的方法吗？例如，说我想重用一个组件（例如Storybook），但想模拟该原始React组件的导入/实现细节。这可能吗？如果可以，怎么办？谢谢！

sampleComponent.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'

sampleFn.js：

export default () => 'Hello World';

__ mocks __ / sampleFn.js：

export default () => 'Testing Mock';

Answer 1

如果您出于非测试原因而要嘲笑。我不建议您使用开玩笑的嘲笑。

选择依赖项注入模式。

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;

如何在React中使用jest.mock

1 个答案: