Storybook: 故事镜头和 TypeScript 之间的交互

创建于 2017-06-30 · 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');

任何想法可能会发生什么？

资料来源

xogeny

最有用的评论

好的，这里的简单答案是allowSyntheticDefaultImports的设置必须是false中的tsconfig.json 。为什么？我真的不知道。

但是对于任何有兴趣将 Storybook 和 StoryShots 与 Jest 和 TypeScript 一起使用的人，您可能会发现这篇文章很有用。它基本上显示了我在完成这项工作时遇到的所有小障碍以及如何克服这些障碍。我还创建了一个示例存储库。

xogeny 于 2017-06-30

❤3

所有3条评论

好的，这里的简单答案是allowSyntheticDefaultImports的设置必须是false中的tsconfig.json 。为什么？我真的不知道。

xogeny 于 2017-06-30

❤3

不小心跌倒了。如果allowsyntheticdefaultimports设置为 true，则ts-jest默认使用 babel 转换模块，如果这没有反映在你的故事书的 webpack 配置中，那么你就会遇到麻烦。

（我是ts-jest的维护者）

GeeWee 于 2017-07-05

@GeeWee ，感谢您的澄清。我让它工作了，我在这篇文章中添加了一个警告以反映我的经验： https: //medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

xogeny 于 2017-07-05

此页面是否有帮助？

0 / 5 - 0 等级

Storybook: 故事镜头和 TypeScript 之间的交互

最有用的评论

所有3条评论

相关问题