让笑话在故事书中全球可用

Question

我在 create-react-app 项目中使用 @storybook/react 6。

我的所有 stores/objects 等等都有成千上万的测试和模拟。

这些模拟使用 jest.fn()。

我想在我的故事书故事中重复使用这些模拟，但它说 jest is not defined 这是有道理的。

我想知道在运行宁故事书时是否有一种简单的方法可以让笑话全球可用。

目前我正在使用的每个模拟文件中添加 import jest from 'jest-mock'，但我想知道是否有更好的解决方案。

示例：

test.stories.tsx

import React from 'react';

export default {
  title: 'Test'
};

export Test = () => <button onClick={jest.fn()}>Test</button>;

会编译但不会运行 -> jest is not defined 错误

import React from 'react';
import jest from 'jest-mock';

export default {
  title: 'Test'
};

export Test = () => <button onClick={jest.fn()}>Test</button>;

工作正常，但我想避免在任何地方都导入 jest-mock。

Answer 1

您可以通过将以下行添加到项目 .storybook 文件夹中的 preview.js 文件来确保模拟在您的所有故事中可用：

import jest from 'jest-mock';
window.jest = jest;

来自Storybook docs：

Use preview.js for global code (such as CSS imports or JavaScript mocks) that applies to all stories.

Answer 2

需要在jest config中全局设置。 https://jestjs.io/docs/en/configuration#globals-object

让笑话在故事书中全球可用

Make jest globally available in storybook

javascript

reactjs

jestjs

create-react-app

storybook