Storybook: ストーリーショットとTypeScript間の相互作用

作成日 2017年06月30日  ·  3コメント  ·  ソース: storybookjs/storybook

何が起こっているのかわかりませんが、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');

何が起こっているのか考えてみませんか?

最も参考になるコメント

OK、ここでの簡単な答えは、 allowSyntheticDefaultImportsの設定は$ tsconfig.jsonfalseでなければならないということです。 なんで? よくわかりません。

しかし、JestとTypeScriptでStorybookとStoryShotsを使用することに興味がある人にとっては、この記事が役立つかもしれません。 これは基本的に、これを機能させるときに遭遇したすべての小さなハードルと、それらを克服する方法を示しています。 サンプルリポジトリも作成します。

全てのコメント3件

OK、ここでの簡単な答えは、 allowSyntheticDefaultImportsの設定は$ tsconfig.jsonfalseでなければならないということです。 なんで? よくわかりません。

しかし、JestとTypeScriptでStorybookとStoryShotsを使用することに興味がある人にとっては、この記事が役立つかもしれません。 これは基本的に、これを機能させるときに遭遇したすべての小さなハードルと、それらを克服する方法を示しています。 サンプルリポジトリも作成します。

偶然これを転倒した。 $# allowsyntheticdefaultimportsがtrueに設定されている場合、 ts-jestはデフォルトでbabelを使用してモジュールをトランスパイルします。これがストーリーブックのウェブパック構成に反映されていない場合は、問題が発生します。

(私はts-jestのメンテナーです)

@GeeWee 、説明してくれてありがとう。 私はそれを機能させ、私の経験を反映するためにこの記事に警告を追加しました: https ://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

このページは役に立ちましたか?
0 / 5 - 0 評価