Vue Storybook Jest Addon 配置问题答案

【问题标题】：Vue Storybook Jest Addon configuration problemVue Storybook Jest Addon 配置问题
【发布时间】：2019-03-06 10:22:27
【问题描述】：

我想知道是否有人使用 jest 插件可以分享它的 Vue Storybook 配置，因为我似乎无法让它工作。我试过全局模式：

在 Storybook 的 config.js 中：

import { withTests } from '@storybook/addon-jest';

import results from '../.jest-test-results.json';

addDecorator(
  withTests({
    results,
  })
);

在我的故事里：

storiesOf('Elements/Tag', module)
  .addParameters({ jest: ['ThuleTag'] })
  .addDecorator(VueInfoAddon)
  .addDecorator(withTests({ results })('ThuleTag'))
  .add('Squared',
    withNotes(_notes)(() => ({
      components: {ThuleTag},
      template: _template,
      propsDescription: {
        size: 'medium / small / mini',
        type: 'success / info/warning / danger'
      }
    })),
  )

我得到这个错误：

TypeError: Object(...)(...).addParameters is not a function

我也尝试过本地方式：在我的故事中：

import { storiesOf } from '@storybook/vue'
import { withNotes } from '@storybook/addon-notes'
import results from '../../../jest-test-results.json'
import { withTests } from '@storybook/addon-jest'
import ThuleTag from '../../components/ui/elements/ThuleTag.vue'

let _notes = `A simple wrapper for the Elements el-tag, that accepts the same <i>type</i> and <i>size</i> props`

let _template = `<thule-tag
  size="small"
  key="name">Tag Namez
</thule-tag>`

storiesOf('Elements/Tag', module)
  .addDecorator(withTests({ results }))
  .add('Squared',
    withNotes(_notes)(() => ({
      components: {ThuleTag},
      template: _template,
      propsDescription: {
        size: 'medium / small / mini',
        type: 'success / info/warning / danger'
      }
    })),
    {
      jest: ['ThuleTag.test.js'],
    }
  )

这里我得到这个错误：

Error in render: "TypeError: Cannot read property '__esModule' of undefined"

测试选项卡会显示以下消息：

This story has tests configured, but no file was found

有人能指点我是什么搞砸了吗？

【问题讨论】：

标签： vue.js jestjs storybook

【解决方案1】：

目前 Vue.js 似乎不支持 storybook jest 插件 https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md

【讨论】：

【解决方案2】：

好的，关于第一个错误

Error in render: "TypeError: Cannot read property '__esModule' of undefined"

我认为你应该检查一下你的 babel-config，你好像忘记了你的框架的一些预设。

关于第二个问题

This story has tests configured, but no file was found

这个问题发生在 Jest 和 storybook/addon-jest 想要使用 equals api，但他们不能。在 Jest 的最新版本中，输出文件结构具有 options.testResults ，但 storybook/addon-jest 需要 options.results 和 options.results.testResults。

有两种可能的解决方案：

使用适当版本的 Jest 和 storybook/addon-jest

在 storybook-jest 库的 index.js 中应用 huck，就这样

if (testFiles && !testFiles.disable) {
  //todo: HERE should be your storybook hack
  options.results = options.tests.testResults;
  options.results.testResults = options.results;
    emitAddTests({
    kind: kind,
    story: story,
    testFiles: testFiles,
    options: options
  });
}

【讨论】：