Replace (or mock) an imported file in a component

[ManUtopiK]

Hi ! Thanks for Histoire, it's really awesome !

I got a library that I want to replace when my component is mounted inside Histoire.
Here is a really simple example :

// MyComponent.vue

<script setup lang="ts">
import { myLogic } from '~/logic/storage'

const myValue = computed(() => `${myLogic} + some text...`)
</script>

<template>
  <div>{{ myValue }}</div>
</template>

I want to create a Story for this component, but I want to replace the provided values done by the ~/logic/storage file.
In fact, I even want to not import this file because it contains imported libs that break Histoire.

How can I replace or mock this file in Histoire only ? Could I do that with Histoire or Vite ?

[moussaclarke]

I've been able to achieve this kind of thing in a Nuxt app with aliasing. e.g.

alias: {
        '~/logic/storage': resolve(__dirname, './path/to/myStorageMock.ts'),
    }

You'll have to make sure it only runs in histoire context. I couldn't set the alias in the histoire config itself - I wound up setting a process.env flag (e.g. process.env.HISTOIRE = 'true') in histoire config and then checking for that in nuxt.config before setting the alias there.

But it probably depends on your specific app. I would maybe try it in histoire.config -> vite.resolve.alias first and see what happens.