故事截图错误 - 无法找到模块。/src/common 映射为

Question

我刚刚安装了@storybook/addon-storyshots 并按照他们的说明将其置于根目录。

src/Storyshots.test.ts

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

当我运行测试时，我现有的所有测试都通过了，但在这个文件上失败了 - StoryShots。test.ts 错误：

Error:

FAIL  src/Storyshots.test.ts 
Test suite failed to run

Configuration error:

Could not locate module ./src/common mapped as:
C:\apps\vanilla\storybook-examples\src$1.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/src\/(.*)/": "C:\apps\vanilla\storybook-examples\src$1"
  },
  "resolver": undefined
}

  at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:552:17)
  at Object.<anonymous> (node_modules/shelljs/shell.js:9:14)

我的项目中确实进行了模块解析，一切正常。请参阅我的项目的示例模块解析：

tsconfig.json

{
...
  "compilerOptions": {
    "baseUrl": "./",
  },
  "include": [
    "src/**/*", "@types", "stories"
  ]
}

.babelrc

{
  "plugins": [
...
    ["module-resolver", {
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "root": ["./"],
      "alias": {
        "src": "./src"
      }
    }]
  ]
}

webpack.config.dev.js

const src = path.join(__dirname, '/src');

module.exports = {
...
  resolve: {
    modules: [src, 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],

    // fix module resolver for typescript !!!
    alias: {
      src
    }
  },

我只是没有在 .storybook 文件夹 - .storybook/ 中设置任何这些。我不确定故事书解析是如何工作的，也不确定它为什么要寻找 common/ 文件夹。我没有常用文件夹。

这是我的一个故事的例子：

Basic.stories.tsx

import React from 'react';
import Basic from 'src/Components/Basic/Basic';

export const BasicHelloWorld = () => <Basic {...{ title: 'hello world' }} />;
export default { title: 'Basic' };

这是我的故事书main.js

main.js

module.exports = {
  stories: ['../**/*.stories.tsx', '../**/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ]
};

感谢任何建议。谢谢

Answer 1

事实证明，我没有包含在上面的配置中的一件事是我的 jest.config.js 文件。

原来是以下原因导致了这个问题：

jest.config.js！破碎

  moduleNameMapper: {
    'src/(.*)': '<rootDir>/src/',
...
  },

今天我决定把所有东西都去掉，在这个过程中遇到了 ts-jest 配置示例，其中正则表达式有一个精确的路径，即以 ^ 开始并以 $ 结束，即不是一个疯狂的匹配。

https://kulshekhar.github.io/ts-jest/user/config/

不是我想太多，也不是为什么它只会破坏故事镜头，除了我认为值得确保准确性的文件匹配和分辨率方面的任何事情。我更新了我的正则表达式以匹配上面的路径和 BINGO - 没有更多错误！！！哈哈。好运气。

jest.config.js 固定英镑

  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/'
    ...

  },

故事截图错误 - 无法找到模块。/src/common 映射为

storyshots error - Could not locate module ./src/common mapped as

typescript

reactjs

jestjs

storybook

storyshots