javascript - 让 Jest 在故事书中全局可用

Question

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

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

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

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

我想知道是否有一种简单的方法可以在运行故事书时让 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。

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.