Сделать jest глобально доступным в сборнике рассказов

#javascript #reactjs #jestjs #create-react-app #storybook

#javascript #reactjs #jestjs #создать-реагировать-приложение #сборник рассказов

Вопрос:

Я использую @storybook/react 6 в create-react-app проекте.

У меня есть тысячи тестов и макетов для всех моих хранилищ / объектов и так далее.

В этих издевательствах используется 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 везде.

Ответ №1:

Вы можете гарантировать, что макет будет доступен во всех ваших историях, добавив следующие строки в preview.js файл в .storybook папке вашего проекта:

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

Из документации сборника рассказов:

Используйте preview.js для глобального кода (например, импорта CSS или макетов JavaScript), который применяется ко всем историям.

1. добавлено import jest from 'jest-mock'; preview.js , но оно не работает

2.Попробовал еще раз, и у меня тоже ничего не получилось; извините; Я, кажется, неправильно запомнил, как это работает. Следующее, хотя и не очень приятное, похоже, выполняет свою работу: в preview.js: import jest from 'jest.mock' window.jest = jest

3. Отредактировал мой ответ, чтобы включить более точную информацию.

4. Спасибо, что работает! Наверное, я никогда не понимал, что вы можете устанавливать window свойства внутри preview.js .

Ответ №2:

Вам нужно установить его глобально в конфигурации jest. https://jestjs.io/docs/en/configuration#globals-object