何が起こっているのかわかりませんが、TypeScriptを使用するためのjest
セットアップがあります。 それはうまくいきます。 さらに、TypeScriptを使用するためのstorybook
セットアップがあります。 それはうまくいきます。 しかし、TypeScriptでstoryshots
を使おうとすると、問題が発生します。 私の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
がtrueに設定されている場合、 ts-jest
はデフォルトでbabelを使用してモジュールをトランスパイルします。これがストーリーブックのウェブパック構成に反映されていない場合は、問題が発生します。
(私はts-jest
のメンテナーです)
@GeeWee 、説明してくれてありがとう。 私はそれを機能させ、私の経験を反映するためにこの記事に警告を追加しました: https ://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7
最も参考になるコメント
OK、ここでの簡単な答えは、
allowSyntheticDefaultImports
の設定は$tsconfig.json
のfalse
でなければならないということです。 なんで? よくわかりません。しかし、JestとTypeScriptでStorybookとStoryShotsを使用することに興味がある人にとっては、この記事が役立つかもしれません。 これは基本的に、これを機能させるときに遭遇したすべての小さなハードルと、それらを克服する方法を示しています。 サンプルリポジトリも作成します。