Storybook: Interactions entre les storyshots et TypeScript

Créé le 30 juin 2017  ·  3Commentaires  ·  Source: storybookjs/storybook

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?

Commentaire le plus utile

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 .

Tous les 3 commentaires

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

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

ZigGreen picture ZigGreen  ·  3Commentaires

miljan-aleksic picture miljan-aleksic  ·  3Commentaires

MrOrz picture MrOrz  ·  3Commentaires

arunoda picture arunoda  ·  3Commentaires

purplecones picture purplecones  ·  3Commentaires