Je ne sais pas ce qui se passe, mais j'ai une configuration jest
pour utiliser TypeScript. Cela fonctionne bien. De plus, j'ai une configuration storybook
pour utiliser TypeScript. Cela fonctionne bien. Mais lorsque j'essaie d'utiliser storyshots
avec TypeScript, je rencontre des problèmes. Mon code TypeScript ressemble à ceci :
● 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)
Ce qui est étrange, c'est que React
devrait être trouvé. Le fichier qui y est référencé a, comme première ligne :
import React = require('react');
Quelques idées sur ce qui pourrait se passer?
OK, la réponse simple ici est que le paramètre pour allowSyntheticDefaultImports
doit être false
dans tsconfig.json
. Pourquoi? Je ne sais pas vraiment.
Mais pour toute personne intéressée à utiliser Storybook et StoryShots avec Jest et TypeScript, vous pourriez trouver cet article utile . Il montre essentiellement tous les petits obstacles que j'ai rencontrés en faisant fonctionner cela et comment les surmonter. Je crée également un exemple de dépôt .
Je suis tombé dessus par accident. ts-jest
utilise babel pour transpiler les modules par défaut si allowsyntheticdefaultimports
est défini sur true, et si cela n'est pas reflété dans la configuration du webpack de votre livre de contes, vous rencontrez des problèmes.
(je suis un mainteneur de ts-jest
)
@GeeWee , merci pour la clarification. Je l'ai fait fonctionner et j'ai ajouté une mise en garde à cet article pour refléter mon expérience : https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7
Commentaire le plus utile
OK, la réponse simple ici est que le paramètre pour
allowSyntheticDefaultImports
doit êtrefalse
danstsconfig.json
. Pourquoi? Je ne sais pas vraiment.Mais pour toute personne intéressée à utiliser Storybook et StoryShots avec Jest et TypeScript, vous pourriez trouver cet article utile . Il montre essentiellement tous les petits obstacles que j'ai rencontrés en faisant fonctionner cela et comment les surmonter. Je crée également un exemple de dépôt .