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

Question

I have just installed #storybook/addon-storyshots and followed their instruction to put it at the root.
src/Storyshots.test.ts
import initStoryshots from '#storybook/addon-storyshots';
initStoryshots();
When I run tests, all my existing tests pass but it fails on this file - StoryShots.test.ts with error:
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)
I do have module resolution going on in my project and everything works there. See example module resolution for my project:
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
}
},
I just haven't set any of these in .storybook folder - .storybook/. I'm not sure how storybook resolution works or why its looking for common/ folder. I have no common folder.
This is an example of one of my stories:
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' };
This is my storybook main.js
main.js
module.exports = {
stories: ['../**/*.stories.tsx', '../**/**/*.stories.tsx'],
addons: [
'#storybook/addon-actions',
'#storybook/addon-links',
]
};
Appreciate any suggestions. Thanks

Answer 1

It turns out the one thing I didn't include in my configs above was my jest.config.js file.
It turns out the following was causing this problem:
jest.config.js ! broken
moduleNameMapper: {
'src/(.*)': '<rootDir>/src/$1',
...
},
Today I decided to strip everything down, and in the process came across ts-jest config examples where the regex had an exact path, ie started with ^ and ended with $, ie not a wild match.
https://kulshekhar.github.io/ts-jest/user/config/
Not that I thought much of it or why it would break storyshots only and nothing else but anything around file matching and resolutions I thought was worth ensuring accuracy. I updated my regex to match the paths above and BINGO - NO MORE ERROR !!! HAHAH. A nice stroke of luck.
jest.config.js £ fixed
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1'
...
},