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?
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.
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, 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
Most helpful comment
OK, the simple answer here is that the setting for
allowSyntheticDefaultImports
has to befalse
intsconfig.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.