Storybook: Взаимодействие между сторис и TypeScript

Созданный на 30 июн. 2017  ·  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, и если это не отражено в конфигурации веб-пакета вашего сборника рассказов, у вас возникнут проблемы.

(я сопровождаю ts-jest )

@GeeWee , спасибо за разъяснение. У меня все заработало, и я добавил в эту статью оговорку, чтобы отразить свой опыт: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

Была ли эта страница полезной?
0 / 5 - 0 рейтинги