tomfreudenberg / next-auth-mock Goto Github PK
View Code? Open in Web Editor NEWNextAuth.js mockup provider for jest, storybook and others.
License: MIT License
NextAuth.js mockup provider for jest, storybook and others.
License: MIT License
How to adapt some of the arguments here:
I have tried starting to use this package, but running problems on very beginning.
I have test file like this:
// __tests__/index.test.jsx
import { render, screen } from '@testing-library/react'
import { withMockAuth } from '@tomfreudenberg/next-auth-mock/jest'
import Home from '../pages/index'
import '@testing-library/jest-dom'
describe('Home', () => {
it('renders a heading', () => {
render(<Home />)
const heading = screen.getByRole('heading', {
name: /welcome to next\.js!/i,
})
expect(heading).toBeInTheDocument()
})
})
And when I run jest to test that, I get following error:
FAIL __tests__/index.test.jsx
โ Test suite failed to run
EISDIR: illegal operation on a directory, read
6 | import '@testing-library/jest-dom'
7 |
> 8 | describe('Home', () => {
| ^
9 | it('renders a heading', () => {
10 | render(<Home />)
11 |
at Runtime.readFile (node_modules/jest-runtime/build/index.js:2574:21)
at Object.<anonymous> (__tests__/index.test.jsx:8:15)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.421 s
Ran all test suites related to changed files.
This problem appears whenever I have import for withMockAuth present, ie this line:
import { withMockAuth } from '@tomfreudenberg/next-auth-mock/jest'
If I remove that line, all works as expected (I get error that useSession needs to be wrapped within SessionProvder). Adding that withMockAuth
inside render()
call doesn't change output in any way from EISDIR error.
I've wiped my node_modules
and installed things again, but hasn't changed outcome. Any ideas for further fixing this issue?
Hello i tried to use this dependency to use useSession in my components but it doesn't work i followed instructions in the repo.
Versions
"next-auth": "^4.15.1", "next": "12.2.5", "@tomfreudenberg/next-auth-mock": "^0.5.5",
// .storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
/** Expose public folder to storybook as static */
staticDirs: ['../public'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-dark-mode',
'storybook-tailwind-dark-mode',
'@tomfreudenberg/next-auth-mock/storybook',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
},
},
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
core: {
builder: 'webpack5',
},
webpackFinal: (config) => {
/**
* Add support for alias-imports
* @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
*/
config.resolve.alias = {
...config.resolve?.alias,
'@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
};
config.resolve.roots = [path.resolve(__dirname, '../public'), 'node_modules'];
config.resolve.plugins = [new TsconfigPathsPlugin()];
return config;
},
};
Hey @TomFreudenberg!
I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. I'm opening up this issue and letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.
Hope you have a great day!
Stay safe
.storybook/main.ts
import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@tomfreudenberg/next-auth-mock',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/nextjs',
options: {},
},
features: {
experimentalRSC: true,
},
staticDirs: ['../public'],
}
export default config
$ storybook dev -p 6006
@storybook/cli v8.1.8
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.ts.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./node_modules/@tomfreudenberg/next-auth-mock/dist/index.js.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
Error: Package subpath './react' is not defined by "exports" in ./node_modules/next-auth/package.json
at exportsNotFound (node:internal/modules/esm/resolve:294:10)
at packageExportsResolve (node:internal/modules/esm/resolve:584:13)
at resolveExports (node:internal/modules/cjs/loader:591:36)
at Module._findPath (node:internal/modules/cjs/loader:668:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object.<anonymous> (./node_modules/@tomfreudenberg/next-auth-mock/dist/index.js:12:15)
at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
at loadPreset (./node_modules/@storybook/core-common/dist/index.js:12:59)
at async Promise.all (index 1)
at async loadPresets (./node_modules/@storybook/core-common/dist/index.js:12:483)
at async getPresets (./node_modules/@storybook/core-common/dist/index.js:12:1503)
at async buildDevStandalone (./node_modules/@storybook/core-server/dist/index.js:77:2024)
at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:40:3599)
at async dev (./node_modules/@storybook/cli/dist/generate.js:705:563)
at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:707:250)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
WARN Failed to load preset: {"type":"presets","name":"/Users/igormakowski/Documents/repositories/rigtch/rigtch-fm-www/node_modules/@tomfreudenberg/next-auth-mock/dist/index.js"} on level 1
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './react' is not defined by "exports" in ./node_modules/next-auth/package.json
at exportsNotFound (node:internal/modules/esm/resolve:294:10)
at packageExportsResolve (node:internal/modules/esm/resolve:584:13)
at resolveExports (node:internal/modules/cjs/loader:591:36)
at Module._findPath (node:internal/modules/cjs/loader:668:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object.<anonymous> (./node_modules/@tomfreudenberg/next-auth-mock/dist/index.js:12:15)
error: script "storybook" exited with code 1
I was wondering if it wouldn't be good if we automate the release process (generate tags, releases, changelogs and publish to npm).
For example, the latest release published to npm has no release or tag in GitHub.
After some research I've found that the most used libraries for this kind of use case are:
All the options above would require the usage of Conventional Commits.
What do you think about it?
Hello I'm trying to use this package on Storybook 6.5.16 with Nextjs 16 and 19 but I'm getting this error:
ERROR in ./node_modules/@tomfreudenberg/next-auth-mock/dist/storybook/preset/preview.js
Module not found: Error: Can't resolve '@tomfreudenberg/next-auth-mock/storybook' in '/home/x/Projects/x/node_modules/@tomfreudenberg/next-auth-mock/dist/storybook/preset'
@ ./node_modules/@tomfreudenberg/next-auth-mock/dist/storybook/preset/preview.js 8:17-68
@ ./node_modules/@tomfreudenberg/next-auth-mock/dist/storybook/preset/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@tomfreudenberg/next-auth-mock/dist/storybook/preset/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js
I changed file imports to relative pass in all mentioned files and it seems it solved the problem but I'm seeking for a better fix.
Hey Tom, struggling to get your package working as intended. I'm using the new app directory in Next.js 13, Storybook is playing nice until i try useSession on my storybook component and i'm thrown the following error:
[next-auth]: `useSession` must be wrapped in a <SessionProvider />
have you encountered the same issue or could advise how to fix ?
Just wanted to know if there are plans with updating and maintaining this package. Noticing issues without comments since Jan this year.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.