Storybook: Interaksi antara cuplikan cerita dan TypeScript

Dibuat pada 30 Jun 2017 · 3Komentar · Sumber: storybookjs/storybook

Saya tidak yakin apa yang sedang terjadi, tetapi saya telah menyiapkan jest untuk menggunakan TypeScript. Itu bekerja dengan baik. Selanjutnya, saya memiliki pengaturan storybook untuk menggunakan TypeScript. Itu bekerja dengan baik. Tetapi ketika saya mencoba menggunakan storyshots dengan TypeScript, saya mengalami masalah. Kode TypeScript saya terlihat seperti ini:

 ● 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)

Yang aneh adalah React harus ditemukan. File yang direferensikan di sana, sebagai baris pertamanya:

import React = require('react');

Ada ide apa yang mungkin terjadi?

Sumber

xogeny

Komentar yang paling membantu

OK, jawaban sederhana di sini adalah bahwa pengaturan untuk allowSyntheticDefaultImports harus false di tsconfig.json . Mengapa? Aku tidak tahu.

Tetapi bagi siapa saja yang tertarik menggunakan Storybook dan StoryShots dengan Jest dan TypeScript, Anda mungkin menemukan artikel ini berguna . Ini pada dasarnya menunjukkan semua rintangan kecil yang saya hadapi saat membuatnya bekerja bersama dengan cara mengatasinya. Saya juga membuat repo sampel juga.

xogeny pada 30 Jun 2017

❤3

Semua 3 komentar

OK, jawaban sederhana di sini adalah bahwa pengaturan untuk allowSyntheticDefaultImports harus false di tsconfig.json . Mengapa? Aku tidak tahu.

xogeny pada 30 Jun 2017

❤3

Jatuh karena ini secara tidak sengaja. ts-jest menggunakan babel untuk mentranspile modul secara default jika allowsyntheticdefaultimports disetel ke true, dan jika itu tidak tercermin dalam konfigurasi webpack buku cerita Anda, maka Anda mengalami masalah.

(Saya adalah pengelola ts-jest )

GeeWee pada 5 Jul 2017

@GeeWee , terima kasih atas klarifikasinya. Saya berhasil dan saya menambahkan peringatan ke artikel ini untuk mencerminkan pengalaman saya: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

xogeny pada 5 Jul 2017

Apakah halaman ini membantu?

0 / 5 - 0 peringkat