storybook: Storyshot fail with Typescript

I am trying to use storyshot with Typescript but I get an error that I don’t manage to solve:

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as React from 'react';
                                                                                       
    SyntaxError: Unexpected token *

I also tried to follow https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7 without success.

To Reproduce

yarn add --dev @storybook/addon-storyshots
yarn add --dev @types/storybook__addon-storyshots

In my source folder I add a storybook.test.ts

import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();

The wepack config is

module.exports = (baseConfig, env, config) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('ts-loader'),
            },
        ],
    });
    config.resolve.extensions.push('.ts', '.tsx');

    config.module.rules.push({
        test: /\.stories\.tsx?$/,
        loaders: [
            {
                loader: require.resolve('@storybook/addon-storysource/loader'),
                options: { parser: 'typescript' },
            },
        ],
        enforce: 'pre',
    });
    return config;
};

and the jest config is

"jest": {
        "setupFiles": [
            "<rootDir>/setupTests.ts"
        ],
        "transform": {
            "\\.(ts|tsx)$": "ts-jest",
            "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
            "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
        },
        "testMatch": [
            "!**/flycheck_*",
            "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
            "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
        ],
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js",
            "json"
        ],
        "collectCoverageFrom": [
            "src/**/*.{js,jsx,ts,tsx}"
        ]
    },

Screenshots

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 18 (1 by maintainers)

Most upvoted comments

@apiel @DeX3 I was able to fix similar errors by renaming addons.js and config.js to addons.ts and config.ts

dgreuel on Mar 11, 2019

Any strategies on loading all the stories into using one script like that?

I successfully use Barrelsby to generate a barrel that exports all *.stories.tsx files, then just require that single file.

package.json:

scripts: {
   "generate-barrels": "barrelsby --directory ./src/components --include .stories.tsx --name stories --location replace --delete"
}

.storybook/config.tsx:

function loadStories() {
   require("../src/components/stories");
}

dgreuel on Jun 13, 2019

To fix issues I went away from ts-jest and now use babel version.

https://jestjs.io/docs/en/getting-started

But there are still some tradeoffs - https://kulshekhar.github.io/ts-jest/user/babel7-or-ts

And it seems that ts-jest can’t be used with storyshot, because webpack require fix is about babel(macro or plugin way).

So, my configs:

jest.config.js:

module.exports = {
  roots: ["<rootDir>/src"]
};

.babelrc:

{
  "presets": [["react-app", { "flow": false, "typescript": true }]]
}

.storybook/config.js:

import { configure, addDecorator, addParameters } from "@storybook/react";
import { withOptions } from "@storybook/addon-options";
import { create } from "@storybook/theming";
import requireContext from 'require-context.macro';

const theme = create({
  base: "dark",
  colorPrimary: "#FF4785",
  colorSecondary: "#1EA7FD"
});
addParameters({ options: { theme } });

const req = requireContext("../src", true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

addDecorator(
  withOptions({
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/
  })
);

configure(loadStories, module);

(require-context.macro package is used)

webpack.config.js:

const path = require("path");

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });

  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' }
      }
    ],
    enforce: 'pre',
  });

  config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx', '.json');

  return config;
};

quolpr on May 29, 2019