Storybook: Interacciones entre storyshots y TypeScript

Creado en 30 jun. 2017 · 3Comentarios · Fuente: storybookjs/storybook

No estoy seguro de lo que está pasando, pero tengo una configuración de jest para usar TypeScript. Eso funciona bien. Además, tengo una configuración de storybook para usar TypeScript. Eso funciona bien. Pero cuando trato de usar storyshots con TypeScript, tengo problemas. Mi código TypeScript se ve así:

 ● 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)

Lo extraño es que se debe encontrar React . El archivo al que se hace referencia allí tiene, como su primera línea:

import React = require('react');

¿Alguna idea de lo que podría estar pasando?

Fuente

xogeny

Comentario más útil

OK, la respuesta simple aquí es que la configuración para allowSyntheticDefaultImports tiene que ser false en tsconfig.json . ¿Por qué? Realmente no lo sé.

Pero para cualquier persona interesada en usar Storybook y StoryShots con Jest y TypeScript, puede encontrar útil este artículo . Básicamente, muestra todos los pequeños obstáculos con los que me encontré al hacer que esto funcionara junto con cómo superarlos. También creo un repositorio de muestra .

xogeny en 30 jun. 2017

❤3

Todos 3 comentarios

OK, la respuesta simple aquí es que la configuración para allowSyntheticDefaultImports tiene que ser false en tsconfig.json . ¿Por qué? Realmente no lo sé.

xogeny en 30 jun. 2017

❤3

Se cayó sobre esto por accidente. ts-jest usa babel para transpilar módulos de forma predeterminada si allowsyntheticdefaultimports se establece en verdadero, y si eso no se refleja en la configuración del paquete web de su libro de cuentos, entonces tiene problemas.

(Soy un mantenedor de ts-jest )

GeeWee en 5 jul. 2017

@GeeWee , gracias por la aclaración. Lo hice funcionar y agregué una advertencia a este artículo para reflejar mi experiencia: https://medium.com/@mtiller/storybook -react-typescript-and-jest-c9059ea06fa7

xogeny en 5 jul. 2017

¿Fue útil esta página

0 / 5 - 0 calificaciones