在故事书中提供全球可用的JEST-前端问题

Make jest globally available in storybook(在故事书中提供全球可用的JEST)

本文介绍了在故事书中提供全球可用的JEST的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在@storybook/react项目中使用@storybook/react6。

我对我的所有存储/对象等进行了数千次测试和模拟。

这些模拟使用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。

推荐答案

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

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

来自Storybook docs：

将preview.js用于全局代码(如CSS导入或JavaScript 模仿)，这适用于所有故事。

这篇关于在故事书中提供全球可用的JEST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！