Storybook: Interações entre storyshots e TypeScript

Criado em 30 jun. 2017  ·  3Comentários  ·  Fonte: storybookjs/storybook

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?

Comentários muito úteis

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 .

Todos 3 comentários

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

Esta página foi útil?
0 / 5 - 0 avaliações