لست متأكدًا مما يحدث ، لكن لديّ إعداد jest
لاستخدام TypeScript. هذا يعمل بشكل جيد. علاوة على ذلك ، لديّ إعداد storybook
لاستخدام TypeScript. هذا يعمل بشكل جيد. لكن عندما أحاول استخدام storyshots
مع TypeScript ، أواجه مشكلات. يبدو رمز TypeScript الخاص بي كما يلي:
● Test suite failed to run
ReferenceError: React is not defined
at Object.<anonymous> (src/widgets/generic.tsx:18:28)
at Object.<anonymous> (src/widgets/index.ts:1:25)
at Object.<anonymous> (src/browser/render.tsx:7:23)
at Object.<anonymous> (src/browser/shell.tsx:5:10)
at Object.<anonymous> (src/browser/api.tsx:3:33)
at Object.<anonymous> (src/browser/index.ts:1:23)
at Object.<anonymous> (stories/shell.tsx:3:15)
at newRequire (node_modules/@storybook/addon-storyshots/dist/require_context.js:73:14)
at loadStories (evalmachine.<anonymous>:7:5)
at ConfigApi.configure (node_modules/@kadira/storybook/dist/client/preview/config_api.js:93:9)
at evalmachine.<anonymous>:12:26
at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:102:3)
at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:100:35)
at Object.<anonymous> (test/alt.ts:2:18)
الغريب أنه يجب العثور على React
. الملف الذي تتم الإشارة إليه هناك ، كسطره الأول:
import React = require('react');
أي أفكار عما يمكن أن يحدث؟
حسنًا ، الإجابة البسيطة هنا هي أن إعداد allowSyntheticDefaultImports
يجب أن يكون false
في tsconfig.json
. لماذا ا؟ لا اعرف حقا.
ولكن لأي شخص مهتم باستخدام Storybook و StoryShots مع Jest و TypeScript ، قد تجد هذه الكتابة مفيدة . إنه يوضح بشكل أساسي كل العقبات الصغيرة التي واجهتها أثناء العمل مع كيفية التغلب عليها. أنا أيضًا أقوم بإنشاء نموذج الريبو أيضًا.
الوقوع في هذا بالصدفة. يستخدم ts-jest
babel لتحويل الوحدات افتراضيًا إذا تم ضبط allowsyntheticdefaultimports
على true ، وإذا لم ينعكس ذلك في تكوين webpack الخاص بكتابك القصصي ، فإنك تواجه مشكلة.
(أنا مشرف على ts-jest
)
GeeWee ، شكرا للتوضيح. لقد نجحت في العمل وأضفت تحذيرًا إلى هذه المقالة لتعكس تجربتي: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7
التعليق الأكثر فائدة
حسنًا ، الإجابة البسيطة هنا هي أن إعداد
allowSyntheticDefaultImports
يجب أن يكونfalse
فيtsconfig.json
. لماذا ا؟ لا اعرف حقا.ولكن لأي شخص مهتم باستخدام Storybook و StoryShots مع Jest و TypeScript ، قد تجد هذه الكتابة مفيدة . إنه يوضح بشكل أساسي كل العقبات الصغيرة التي واجهتها أثناء العمل مع كيفية التغلب عليها. أنا أيضًا أقوم بإنشاء نموذج الريبو أيضًا.