I have a component that imports a hook from a 3rd party library and inside of that hook it checks if a context is null and if so, throws an error. I can't wrap it with the provider for other reasons so the only thing I can think of doing is mocking the import. When I try to do this, however, Storybook still uses the original import and not the mocked version. The mocked version is just a hook that returns the value passed into it.
here's how I'm trying to mock the import with typescript alias'
.storybook/main.js
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
configFile: "tsconfig.json"
}),
];
.storybook/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"useUnknownInCatchVariables": false
},
"paths": {
"moduletomock/*": ["src/mocks/*"]
},
"include": [
"../src"
]
}