让 jest 在 Storybook 中全球可用答案

【问题标题】：Make jest globally available in storybook让 jest 在 Storybook 中全球可用
【发布时间】：2020-10-16 01:11:54
【问题描述】：

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

我对所有商店/对象等进行了数千次测试和模拟。

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

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

我想知道在运行 storybook 时是否有一种简单的方法可以让 jest 全局可用。

目前我在我使用的每个模拟文件中添加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。

【问题讨论】：

标签： javascript reactjs jestjs create-react-app storybook

【解决方案1】：

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

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

来自Storybook docs：

将 preview.js 用于全局代码（例如 CSS 导入或 JavaScript 模拟）适用于所有故事。

【讨论】：

已将import jest from 'jest-mock'; 添加到preview.js，但它不起作用
又试了一次，对我也不起作用；对不起;我似乎记错了它是如何工作的。以下内容虽然不漂亮，但似乎完成了工作：在 preview.js 中：import jest from 'jest.mock'window.jest = jest
编辑了我的答案以包含更准确的信息。
谢谢你的作品！我想我从来不明白你可以在preview.js 中设置window 属性。

【解决方案2】：

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

【讨论】：

如何在 CRA 的上下文中执行此操作并使其在故事书中全球可用？