Não tenho certeza do que está acontecendo, mas tenho jest
configurado para usar o TypeScript. Isso funciona bem. Além disso, tenho storybook
configurado para usar o TypeScript. Isso funciona bem. Mas quando tento usar storyshots
com TypeScript, tenho problemas. Meu código TypeScript se parece com isso:
● 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)
O que é estranho é que React
deve ser encontrado. O arquivo que está sendo referenciado tem, como primeira linha:
import React = require('react');
Alguma idéia do que poderia estar acontecendo?
OK, a resposta simples aqui é que a configuração para allowSyntheticDefaultImports
deve ser false
em tsconfig.json
. Por quê? Eu realmente não sei.
Mas para qualquer pessoa interessada em usar Storybook e StoryShots com Jest e TypeScript, você pode achar este artigo útil . Basicamente, mostra todos os pequenos obstáculos que encontrei enquanto fazia isso funcionar, além de como superá-los. Eu também crio um repositório de amostra .
Caiu sobre isso por acidente. ts-jest
usa babel para transpilar módulos por padrão se allowsyntheticdefaultimports
estiver definido como true, e se isso não estiver refletido na configuração do webpack do seu livro de histórias, você terá problemas.
(eu sou um mantenedor de ts-jest
)
@GeeWee , obrigado pelo esclarecimento. Consegui funcionar e adicionei uma ressalva a este artigo para refletir minha experiência: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7
Comentários muito úteis
OK, a resposta simples aqui é que a configuração para
allowSyntheticDefaultImports
deve serfalse
emtsconfig.json
. Por quê? Eu realmente não sei.Mas para qualquer pessoa interessada em usar Storybook e StoryShots com Jest e TypeScript, você pode achar este artigo útil . Basicamente, mostra todos os pequenos obstáculos que encontrei enquanto fazia isso funcionar, além de como superá-los. Eu também crio um repositório de amostra .