时间戳

首页 > 解决方案 > 如何在 React 中使用 jest.mock

javascript - 如何在 React 中使用 jest.mock

问题描述

有没有办法jest.mock在 React 中使用 's？例如，假设我想重用一个组件（例如 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'

sampleFn.js：

export default () => 'Hello World';

__mocks__/sampleFn.js：

export default () => 'Testing Mock';

标签： javascriptreactjsjestjs

解决方案

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

选择依赖注入模式。

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;

推荐阅读