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?
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
Hilfreichster Kommentar
OK, die einfache Antwort hier ist, dass die Einstellung für
allowSyntheticDefaultImports
false
intsconfig.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 .