Storybook: Interaktionen zwischen Storyshots und TypeScript

Erstellt am 30. Juni 2017  ·  3Kommentare  ·  Quelle: storybookjs/storybook

Ich bin mir nicht sicher, was los ist, aber ich habe jest eingerichtet, um TypeScript zu verwenden. Das funktioniert gut. Außerdem habe ich storybook eingerichtet, um TypeScript zu verwenden. Das funktioniert gut. Aber wenn ich versuche, storyshots mit TypeScript zu verwenden, stoße ich auf Probleme. Mein TypeScript-Code sieht so aus:

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

Seltsam ist, dass React gefunden werden sollte. Die Datei, auf die dort verwiesen wird, hat als erste Zeile:

import React = require('react');

Irgendwelche Ideen, was los sein könnte?

Hilfreichster Kommentar

OK, die einfache Antwort hier ist, dass die Einstellung für allowSyntheticDefaultImports false in tsconfig.json sein muss. Warum? Ich weiß es nicht.

Aber für alle, die daran interessiert sind, Storybook und StoryShots mit Jest und TypeScript zu verwenden, könnten Sie diese Beschreibung nützlich finden. Es zeigt im Grunde alle kleinen Hürden, auf die ich gestoßen bin, als ich das zum Laufen gebracht habe, und wie ich sie überwinden kann. Ich erstelle auch ein Beispiel-Repo .

Alle 3 Kommentare

OK, die einfache Antwort hier ist, dass die Einstellung für allowSyntheticDefaultImports false in tsconfig.json sein muss. Warum? Ich weiß es nicht.

Aber für alle, die daran interessiert sind, Storybook und StoryShots mit Jest und TypeScript zu verwenden, könnten Sie diese Beschreibung nützlich finden. Es zeigt im Grunde alle kleinen Hürden, auf die ich gestoßen bin, als ich das zum Laufen gebracht habe, und wie ich sie überwinden kann. Ich erstelle auch ein Beispiel-Repo .

Aus Versehen darüber gestolpert. ts-jest verwendet babel standardmäßig zum Transpilieren von Modulen, wenn allowsyntheticdefaultimports auf true gesetzt ist und sich dies nicht in der Webpack-Konfiguration Ihres Storybooks widerspiegelt, dann stoßen Sie auf Probleme.

(Ich bin Betreuer von ts-jest )

@GeeWee , danke für die Klarstellung. Ich habe es zum Laufen gebracht und diesem Artikel einen Vorbehalt hinzugefügt, um meine Erfahrung widerzuspiegeln: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen