tomfreudenberg/next-auth-mock

NextAuth.js mockup provider for jest, storybook and others.

next-auth-mock's Issues

Integrate next-auth-mock example for nextjs and storybook integration

Checkout at: https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

Check "stop mocking fetch" in jest

How to adapt some of the arguments here:

https://kentcdodds.com/blog/stop-mocking-fetch

When using with Jest, EISDIR: illegal operation on a directory

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?

'useSession' must be wrapped in <SessionProvider/>'

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;
  },
};

Use the new Framework API?

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

Error: Package subpath './react' is not defined by "exports"

.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

Automate release process

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:

• Google Release Please: Maintained by Google it keeps an opened pull request that you can merge when you want to release a new version. It seems to work well with a simple branch structure like the one that we have here.
• Semantic Release: I've been using this one on a personal project and it seems pretty flexible. The main pro that I can see is that it keeps track of your changelog and version always based on your latest release on GitHub and not based on some local files.
• Auto: It is used by Storybook in their Addon Kit template, it seems to be a good fit for our use case.

All the options above would require the usage of Conventional Commits.

What do you think about it?

Can't resolve '@tomfredenberg/next-auth-mock/storybook'

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.

Next.js 13 (with app dir) useSession must be wrapped in SessionProvider

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 ?

Is this being maintained?

Just wanted to know if there are plans with updating and maintaining this package. Noticing issues without comments since Jan this year.