Storyshots | missing module spdx-license-ids

[stefanKuijers]

Bug @ storyshot

I used the getting started guide of StoryShot. I've follow the steps for a react app. When I run my test script it throws the following error:

  FAIL  test/unit/storyshots.test.tsx
  ● Test suite failed to run

    Cannot find module 'spdx-license-ids' from 'scan.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:210:17)
      at Object.<anonymous> (node_modules/spdx-expression-parse/scan.js:4:11)

Steps to reproduce

1. yarn add --dev @storybook/addon-storyshots react-test-renderer @types/storybook__addon-storyshots
2. created a storyshots.test.tsx file with the following content:

   import initStoryshots from "@storybook/addon-storyshots";

   initStoryshots({});

3. ran my test script: jest --config test/unit/jest.config.json
   I had other tests before which ran fine. Just after I added storyshot I ran into this issue.

Versions

@storybook/react ^3.4.2
@storybook/addon-storyshot ^3.4.6
@storybook/addon-jest ^3.4.6

Affected platforms

• yarn: 1.7.0
• Windows 64x

Would you guys have any idea whats the issue?

[igor-dv]

Can you please share your jest.config.json ?

[stefanKuijers]

Thanks for the reply.

jest.config.json:

  "rootDir": "../../",
  "setupTestFrameworkScriptFile": "<rootDir>/test/unit/jest.setup.js",
  "transform": {
    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleDirectories": [
    "node_modules",
    "./atoms",
    "./molecules",
    "./organisms"
  ],
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "scss"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$": "<rootDir>/test/unit/mocks/file.js"
  },
  "globals": {
    "ts-jest": {
      "useBabelrc": true
    }
  }
}

Bonus: jest.setup.js

const nock = require("nock");
const enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
require("jest-enzyme");

process.env.NODE_ENV = "development";

enzyme.configure({ adapter: new Adapter() });
afterEach(() => {
  nock.cleanAll();
});

[igor-dv]

Can't find anything problematic here. Do you have a public repo with the reproduction?

[stefanKuijers]

Thanks for checking it out. I'll create a public repo and see or I can reproduce the problem.

[stefanKuijers]

Please check this out: https://github.com/stefanKuijers/storybookStoryshot

[paul-sachs]

Also running into this. Identical error:

"jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(test-setup/storyshot|/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": ["ts", "tsx", "js"],
    "coveragePathIgnorePatterns": ["/node_modules/", "/test/"],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 95,
        "lines": 95,
        "statements": 95
      }
    },
    "collectCoverage": true
  }

[stefanKuijers]

Could it be it is related to typescript? like ts-jest or the @types files... It would have to be the combination though as before I added Storyshots, ts-jest was running fine.

Note that in the TS version we cannot run the exact code from the starter guide. In the starter guide they ask to run initStoryshots(); without params but in TS we need to pass an empty object in. initStoryshots({});. I don't think it should be a problem cause I tried with the following code as well but same error:

import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';

initStoryshots({
  suite: 'Storyshots',
  test: imageSnapshot({
    storybookUrl: 'http://localhost:9001',
  }),
});

[lapanti]

I'm getting the same thing.

Jest config in package.json:

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "coverageReporters": [
      "text-summary",
      "lcov",
      "html"
    ],
    "setupFiles": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
    ],
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ]
  },

Dependencies:

"devDependencies": {
    "@storybook/addon-actions": "^3.4.6",
    "@storybook/addon-info": "^3.4.6",
    "@storybook/addon-knobs": "^3.4.6",
    "@storybook/addon-storyshots": "^3.4.6",
    "@storybook/react": "^3.4.6",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^23.0.1",
    "babel-loader": "^7.1.4",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "^6.26.0",
    "jest": "^23.0.1",
    "react": "^16.4.0",
    "react-test-renderer": "^16.4.0"
}

With setupTests.js looking like this:

window.matchMedia =
  window.matchMedia ||
  function () {
    return {
      matches: false,
      addListener: function () {},
      removeListener: function () {}
    }
  }

And scripts/test.js (adapted from create-react-app):

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test'
process.env.NODE_ENV = 'test'

const jest = require('jest')
let argv = process.argv.slice(2)

// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
  argv.push('--watch')
}

jest.run(argv)

And finally storyshots.test.js (lives inside src/storybook where the config is as well):

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots({
  configPath: './'
})

[stefanKuijers]

thanks @lapanti for showing another case. Your case seems to rule out that the problem is related to TypeScript.

If I have time this weekend I'll play around with different versions of storybook, addon-storyshots etc.

I'd be happy to check through commit history as well but that seems to be pretty hard at storybook as its all one big repo. Is there a way to only see commits that are about storyshot? That'd be a great help.

[stefanKuijers]

@danielduan Thanks for joining the discussion. I'm not sure why you added the needs reproduction tag. Did you see I already provided a repo, ^some comments above^ that reproduces the problem?

@igor-dv : Did you manage to checkout the provided repo?

[igor-dv]

Not yet but soon will try (today or tomorrow).

[stefanKuijers]

Path to solving the issue

I think I got it solved. @lapanti & @psachs21 please check or this solves it for you as well.

Short Version

Issue was fixed by doing the following:

1. Added json to moduleFileExtensions
2. Set path to storybook config with configPath
3. Replace import statements with require statements.

ModuleFileExtensions

Meanwhile I've been experimenting with multiple versions of storyshots. It seems since version 3.4 the above mentioned error was thrown. Before that version (3.2.19) it threw another error:
Cannot find module '../../package' from 'node.js'

ConfigPath

This seems to be pointing to that package .json can't be read so I added json to my moduleFileExtensions which revealed the problem with the following error:
ENOENT: no such file or directory, open 'D:\dev\storybookStoryshot\.storybook\config.js'

Note that in my project the storybook folder does not have a dot in its name. Path was wrong. I tried fixing this issue before cause I read the docs before I started. But back then when I tried it I did not fix the JSON error yet.

Imports

evalmachine.<anonymous>:1
    (function (exports, require, module, __filename, __dirname) { import { configure } from "
@storybook/react";
                                                                  ^^^^^^

    SyntaxError: Unexpected token import

      1 | import initStoryshots from "@storybook/addon-storyshots";
    > 2 |
        | ^
      3 | initStoryshots({
      4 |   suite: "My Tests"

which meant it could not handle that in my config file I used an import statement.

Refactored my config file to not use any imports but only requires:

const configure = require("@storybook/react").configure;
const req = require.context('../storybook', true, /story\.tsx$/);

function loadStories() {
  // setup & dependencies
  require("./stories/Environment");

  // get all other stories
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Wrapping up

It would be good to have some more clear error handling concerning that json was missing in moduleFileExtensions. Actually, maybe it needs to be added to storyshot setup in readme. @igor-dv : what do you think?

The other errors are clearly on my side but I just added them in case others are struggling with these.

I pushed the fix to the repo:
https://github.com/stefanKuijers/storybookStoryshot

[lapanti]

thanks @stefanKuijers that did it for me as well

[igor-dv]

Yeah, mentioning this may help. Wanna PR it?

[stefanKuijers]

I will create a PR for the documentation, sure

[stefanKuijers]

@igor-dv Just wanting to start the PR but I have some questions:

• It should be added to the StoryShots readme.md right?
  https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core

• I assume that the main point will be: Added json to moduleFileExtensions.

[igor-dv]

Yeah, you can describe the use case and explain that solution is to add a .json extension.

[damdafayton]

Path to solving the issue

Issue was fixed by doing the following:

1. Added json to moduleFileExtensions
   https://github.com/stefanKuijers/storybookStoryshot

I was working on a totally different project and this solved my problem. Thx.