Storyshots doesn't seem to load Storybook config

[denkristoffer]

Issue details

I'm trying to set up Storyshots with Jest, but when the test runs it fails with ENOENT: no such file or directory, scandir '/site/.storybook/components'

However, my Storybook config specifies that my stories are placed together with my components with filenames like Component.stories.js:

import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import { withInfo } from '@storybook/addon-info'

const req = require.context('components', true, /.stories.js$/)

addDecorator((story, context) => withInfo()(story)(context))
addDecorator(withKnobs)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

Looks to me like the config file isn't being read or is set up wrong?

Please specify which version of Storybook and optionally any affected addons that you're running

• storybook/react: 3.3.10
• storybook/addon-storyshots: 3.3.10

[igor-dv]

Can you please share your storyshots test file / jest config? and maybe the console output from the test

[denkristoffer]

I'm using Create React App, so most of the Jest setup is handled there. I do have a setupTests.js file with the following content:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

// Mock matchMedia
global.window.matchMedia = jest.fn(() => ({
  matches: false,
  addListener: jest.fn(),
  removeListener: jest.fn(),
}))

jest.mock('scroll-to-element', () => 'scroll-to-element')

The test file is just

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots()

Console output is

Summary of all failing tests
 FAIL  src/storyshots.test.js
  ● Test suite failed to run

    ENOENT: no such file or directory, scandir '/site/.storybook/components'

      at Object.fs.readdirSync (fs.js:904:18)
      at requireModules (../../node_modules/@storybook/addon-storyshots/dist/require_context.js:32:28)
      at Function.newRequire.context (../../node_modules/@storybook/addon-storyshots/dist/require_context.js:90:5)
      at evalmachine.<anonymous>:27:19
      at runWithRequireContext (../../node_modules/@storybook/addon-storyshots/dist/require_context.js:102:3)
      at testStorySnapshots (../../node_modules/@storybook/addon-storyshots/dist/index.js:120:35)
      at Object.<anonymous> (src/storyshots.test.js:3:31)

[igor-dv]

I assume that you need to add a configPath like this:

initStoryshots({
  configPath: path.join(/* provide path to the .config.js here. */),
});

Is the root tests dir different from the root source dir?

[denkristoffer]

No, it's the same. I've actually tried

initStoryshots({
  configPath: '.storybook',
})

But it didn't make a difference.

[igor-dv]

Do you have a repo to reproduce the problem?

[denkristoffer]

I'll try to put one together later 👍

[denkristoffer]

Okay I believe this issue is caused by me setting NODE_ENV=src and then importing my components based on that. This works with the storybook command because I can set NODE_ENV before it, but not with shoryshots. So it's looking for my components in the wrong path. Is there a way way I can modify the command used? I don't see anything in the README.

[igor-dv]

Maybe you can provide the rootDir with jest config... Why do you even need this NODE_ENV=src ?

[denkristoffer]

All the other tests work fine (My test command is NODE_PATH=src react-scripts test --env=jsdom), it's just storyshots that's giving me trouble. I set it so that I can do import SomeComponent from 'components/SomeComponent' instead of having to traverse up through directories all the time. I don't think it's a particularly uncommon practice 🙂 So storyshots is actually reading the right config file, it just doesn't understand that the components directory in

const req = require.context('components', true, /.stories.js$/)

really points to src/components.

[igor-dv]

Maybe as a workaround, you can create another config .storybook-test/config.js and use it in Storyshots.
And in this config you will change const req = require.context('components', true, /.stories.js$/) to point to the stories where Storyshots think they are.

Also, do you have a repo to reproduce the problem?

[denkristoffer]

Apologies for the delay @igor-dv. I think https://github.com/denkristoffer/storyshots-test-repo should show the issue.

And yeah, I've resorted to duplicating the config for now, it works 👍

[Hypnosphi]

Released as 3.4.0-alpha.7