storyshots 错误 - 找不到模块 ./src/common 映射为
Posted
技术标签:
【中文标题】storyshots 错误 - 找不到模块 ./src/common 映射为【英文标题】:storyshots error - Could not locate module ./src/common mapped as 【发布时间】:2020-12-13 23:48:03 【问题描述】:我刚刚安装了@storybook/addon-storyshots 并按照他们的指示将其置于根目录。
src/Storyshots.test.ts
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
当我运行测试时,我现有的所有测试都通过了,但在这个文件上失败了 - StoryShots.test.ts 出现错误:
错误:
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',
]
;
感谢任何建议。谢谢
【问题讨论】:
【参考方案1】:事实证明,我上面的配置中没有包含的一件事是我的 jest.config.js 文件。
原来是以下原因导致了这个问题:
jest.config.js !坏了
moduleNameMapper:
'src/(.*)': '<rootDir>/src/$1',
...
,
今天我决定剥离所有内容,在此过程中遇到了 ts-jest 配置示例,其中正则表达式具有精确路径,即以 ^ 开头并以 $ 结尾,即不是百搭匹配。
https://kulshekhar.github.io/ts-jest/user/config/并不是我想太多,或者为什么它只会破坏故事镜头,除了文件匹配和分辨率方面的任何事情,我认为值得确保准确性。我更新了我的正则表达式以匹配上面的路径和 BINGO - NO MORE ERROR !!!哈哈哈。好运气。
jest.config.js 已修复
moduleNameMapper:
'^src/(.*)$': '<rootDir>/src/$1'
...
,
【讨论】:
以上是关于storyshots 错误 - 找不到模块 ./src/common 映射为的主要内容,如果未能解决你的问题,请参考以下文章
部署 firebase 项目时错误显示“找不到模块 firebase-functions”
VueJS/Typescript 错误:找不到模块“我的模块”或其相应的类型声明