Storybook: التفاعلات بين Storyshots و TypeScript

تم إنشاؤها على ٣٠ يونيو ٢٠١٧  ·  3تعليقات  ·  مصدر: storybookjs/storybook

لست متأكدًا مما يحدث ، لكن لديّ إعداد 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 ، قد تجد هذه الكتابة مفيدة . إنه يوضح بشكل أساسي كل العقبات الصغيرة التي واجهتها أثناء العمل مع كيفية التغلب عليها. أنا أيضًا أقوم بإنشاء نموذج الريبو أيضًا.

ال 3 كومينتر

حسنًا ، الإجابة البسيطة هنا هي أن إعداد 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

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات