Storybook-readme: Error when using storyshots and storybook-readme together.

[janusch]

Hi,
thank you for creating this nice addon, I am using it a lot.
It somehow breaks the storyshots with the current latest stable versions.
@storybook/*@3.3.12
[email protected]

Do you have any idea of what could be going on?

I am also using the workaround for jest described here: https://github.com/tuchk4/storybook-readme/issues/41#issuecomment-362807386

Having a look at doc it seems to be an object when I run jest. Also the storybook app works fine with the specified versions. Would appreciate some pointers on how to resolve the issue.
Maybe an addition to storybook-readme's readme about how to use it with jest/storyshots would be beneficial.

Thank you in advance for getting back to me!

` FAIL ./storyshots.test.js
● Test suite failed to run

TypeError: doc.split is not a function

  at normalized.reduce.docsBeforePreview (node_modules/storybook-readme/services/normalizeDocs.js:31:26)
  at Array.reduce (native)
  at Object.<anonymous>.exports.default (node_modules/storybook-readme/services/normalizeDocs.js:27:28)
  at node_modules/storybook-readme/index.js:101:45
  at withReadme (node_modules/storybook-readme/index.js:117:70)
  at Object.<anonymous> (stories/controls/Button.js:17:26)
  at Object.<anonymous> (stories/controls/index.js:1:103)
  at Object.<anonymous> (stories/index.js:2:1)
  at newRequire (node_modules/@storybook/addon-storyshots/dist/require_context.js:73:14)
  at loadStories (evalmachine.<anonymous>:15:3)
  at ConfigApi.configure (node_modules/@storybook/react/dist/client/preview/config_api.js:93:9)
  at evalmachine.<anonymous>:18:22
  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> (storyshots.test.js:3:31)

`

[tuchk4]

Seems like a bug.
Could you please provide example to reproduce this?

[tuchk4]

Value of doc is what you pass with withReadme or withDocs

It could be string or array of strings (docs: Array<doc: String>)

As I know jest can not transform md files out of the box.

Could you show your jest configuration because seems you receive mocks of md files.

[tuchk4]

BTW. This is working example of using storybook-readme and storyshoots

https://github.com/tuchk4/storybook-readme/tree/master/packages/example-react

I made some fixes at addon and use this jest conf:

 "jest": {
    "transform": {
      "^.+\\.js?$": "babel-jest",
      "^.+\\.md?$": "markdown-loader-jest"
    }
  }

In example there is additional moduleNameMapper section but you do not need it. It is necessary only for addon dev env (because example-react and storybook-readme packages are linked locally with lerna and there is double @storybook/addons instances)

Result snapshot from example storybook It contains all markdown docs that were added with withDocs.

[janusch]

Hi,
thanks for getting back to me and sorry that I didn't get time to create a repro example.
my jest config looks like this:

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
        "<rootDir>/__mocks__/fileMock.js",
      "^.+\\.(css|less|scss|md)$": "identity-obj-proxy"
    }
  },

Thanks a lot for linking to a working example! I will change my jest and add the transforms that you are using.

Thanks again for the help and for maintaining this nice addon!