使用React stroybook作为Jest测试

时间:2017-08-14 09:52:23

标签: reactjs webpack babeljs jestjs raw-loader

我有一个React故事书以及如何将它用作我的测试用例

我有一个导入所有故事的“loader.js”

import sourceBasic from 'raw-loader!./Basics/foo.js?sourceMap';
import Basic from './Basics/foo';

const tree = {
  Basics:[
    {
      title:'Creating and applying a style',
      source:sourceBasic,   element:Basic
    },
    {        ....        }
  ],
  [       ....      ],
  ....
}

export default tree

我使用raw-loadersourceMap来显示故事书中元素的来源

这很有效。

我的问题是当我尝试使用Jest

导入时
FAIL  ./index.test.js
 ● Test suite failed to run

 Cannot find module 'raw-loader!./Basics/foo.js?sourceMap' from 'load.js'

   at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
   at Object.<anonymous> (example/stories/load.js:2:34)

测试文件

import React from 'react';
import renderer from 'react-test-renderer';
import load from './example/stories/load'

for(const groupName in load ){
  const groupArray = load[groupName];
  describe(groupName, () => {
    for(const item of groupArray ){
      test(item.title, () => {
        const elem = renderer.create(item.element);
        expect(elem.toJSON()).toMatchSnapshot();
      }) // END test
    } // END for
  }) // END describe
} // END for

感谢您的帮助

更新

在项目react-outline

上实施了更新和正在运行的 stroybook as test

您可以clone它(react-outline),npm install然后npm test来查看它的实际效果。

以下是output on travis:)

1 个答案:

答案 0 :(得分:1)

如果您不关心for i in `ls -1 *.bash` ; do qsub $i ; done 并想要嘲笑它。您可以使用moduleNameMapper

下的jest setting within your package.json

这样您就可以根据正则表达式匹配拦截所有raw-source / require

添加 package.json

import

希望这有帮助