Storybook: Interactions between storyshots and TypeScript

Created on 30 Jun 2017 · 3Comments · Source: storybookjs/storybook

I'm not sure what is going on, but I've got jest setup to use TypeScript. That works fine. Furthermore, I've got storybook setup to use TypeScript. That works fine. But when I try to use storyshots with TypeScript, I run into problems. My TypeScript code looks like this:

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

What is odd is that React should be found. The file being referenced there has, as its first line:

import React = require('react');

Any ideas what might be going on?

Source

xogeny

Most helpful comment

OK, the simple answer here is that the setting for allowSyntheticDefaultImports has to be false in tsconfig.json. Why? I don't really know.

But for anybody interested in using Storybook and StoryShots with Jest and TypeScript, you might find this writeup useful. It basically shows all the little hurdles I ran into while getting this working along with how to get over them. I also create a sample repo as well.

xogeny on 30 Jun 2017

❤3

All 3 comments

OK, the simple answer here is that the setting for allowSyntheticDefaultImports has to be false in tsconfig.json. Why? I don't really know.

xogeny on 30 Jun 2017

❤3

Fell over this by accident. ts-jest uses babel to transpile modules by default if allowsyntheticdefaultimports is set to true, and if that's not reflected in your storybook's webpack config, then you run into trouble.

(i am a maintainer of ts-jest)

GeeWee on 5 Jul 2017

@GeeWee, thanks for the clarification. I got it working and I added a caveat to this article to reflect my experience: https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7

xogeny on 5 Jul 2017

Was this page helpful?

0 / 5 - 0 ratings