Handle disabled state gracefully

[peterbud]

Describe the feature

nuxt-auth is working great in my project. However I'm using also histoire to build and test my components in isolation. In that case I set isEnabled: false for nuxt-auth in nuxt.config.ts

The problem is that in that case I get a bunch of errors everywhere where on the server side I have #auth import:
Could not resolve import "#auth"

Question: would it be possible to handle such cases more gracefully and avoid those errors, when the module is disabled?

Additional information

No response

[peterbud]

I see similar issue has raised #454

[zoey-kaiser]

Hi @peterbud!

So we do a bunch of testing in our projects as well. The way we approached it was to override the useAuth composable with our custom custom one made for testing.

This composable then also mocks a user account and returns demo functions that our testing suite can use.

You can add this into a testing file:

const pathToMocks = resolve('./nuxt-auth.ts')

nuxt.hook('imports:extend', (_imports) => {
  _imports.push({ name: 'useAuth', from: pathToMocks })
})

This will then overwrite the useAuth composable with the mocked one, allowing you to use it in testing.

Otherwise lets keep discussing how isEnabled works in #454. I hope the code snippet above helps you with your testing setup!

[peterbud]

Thanks for the reply and the help. Can you point me to an example where this is used somewhere?

When I have tried to add this hook to nuxt.config.ts, I got the following error:

Duplicated imports "useAuth", the one from "[...]mock-useAuth.ts" has been ignored and "[....]/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/useAuth" is used

[zoey-kaiser]

Can you point me to an example where this is used somewhere?

This is very dependent on your testing setup. I do not have much experience with historie, but I assume there is a setup file, similarly to how storybook does this. Inside this setup file you can then inject this new hook. You have to ensure it is only being used for your historie setup and does not override the actual composable in the app.