使用 React 故事书作为 Jest 测试答案

【问题标题】：Using React stroybook as Jest test使用 React 故事书作为 Jest 测试
【发布时间】：2026-01-12 23:05:01
【问题描述】：

我有一本 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-loader 和 sourceMap 来显示带有故事书中元素的来源

这很好用。

我的问题是当我尝试使用 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

感谢您的帮助

更新

更新和工作 stroybook as test 在项目react-outline 上实现

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

这里是output on travis :)

【问题讨论】：

内联加载器非常脆弱，因为它们是特定于 webpack 的，不能与任何其他工具一起使用。我不确定是否可以用它来测试你的具体情况。由于使用raw-loader 是为了显示源代码，您可能可以使用babel-plugin-preval 在编译时从文件系统中读取文件并包含其内容。由于它是一个 Babel 插件，你可以将它与任何使用 Babel 的工具一起使用，因此 webpack 和 Jest 都可以正常工作。
嗨@MichaelJungo 我现在正在尝试。我已经安装，包装了导入，但得到了Error: Cannot resolve module 'preval.macro'
看起来您使用的是preval.macro，它是Babel macro。要使用它需要安装babel-macros和add it to your Babel config，当然还需要安装preval.macro。
npm install --save-dev babel-macros + npm install --save-dev preval.macro + npm install --save-dev babel-plugin-preval 工作！ :) 现在需要通过测试来尝试一下
你在babel-plugin-preval 和preval.macro 之间搞混了。现在您的.babelrc 中有babel-macros，您需要像这样导入preval.macro：import preval from 'preval.macro'。但是当然你需要安装preval.macro才能使用它（它是一个常规的npm包）。 npm install --save-dev preval.macro。只有当直接使用babel-plugin-preval（不是宏版本）时，才会处理未绑定的preval标识符。如果您使用preval.macro，您也不需要手动安装babel-plugin-preval（它已经作为依赖项包含在内）。

标签： reactjs webpack babeljs jestjs raw-loader

【解决方案1】：

如果您不关心 raw-source 并想模拟它。您可以在Jest setting within your package.json 下使用moduleNameMapper。

这将让您根据正则表达式匹配拦截所有require/import。

添加到您的 package.json：

  ...
  "dependencies": {
     ...
  },
  ...

  "jest": {
    "globals": {
      "__TEST__": true
    },
    "moduleNameMapper": {
      "\\.(css|jpg|png)$": "<rootDir>/empty-module.js",
      "^raw-loader": "<rootDir>/empty-module.js"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "verbose": true
  }
}

【讨论】：