Mocking uuid

[sw-tracker]

Hi there,

I am trying to mock this import: import { v4 as uuidv4 } from 'uuid'; (package.json dep: "uuid": "9.0.0"), but I am not able to.

I created a uuid.ts files with the following content: export const v4 = () => 'some-uuuid';.

I am using storybook 7.

Thanks!

[gebeto]

Hey 👋

This package only allow you to mock local packages(where used relative import ./)

So if you want to mock uuid package, you can create your file uuid.ts, which will include uuidv4 method:

// uuid.ts
import { v4 } from 'uuid';

export const uuidv4 = v4;

and then you can mock your uuid.ts file by creating __mocks__/uuid.ts:

// __mocks__/uuid.ts
export const uuidv4 = () => 'some-uuuid';

so your folder structure will be like this:

.
├── index.ts
├── uuid.ts
├── __mocks__
│   ├── uuid.ts

index.ts content is simple export of uuid.ts:

export * from './uuid';

---

After this, you can just import uuid from your component like this:

import { uuidv4 } from '../path/to/uuid';

[gebeto]

Unfortunately there are still not implemented all the functionality of jest manual mocks, but you can do some manipulations to mock it

also I think for your needs, instead of mocking some global package, it will be better to mock some component related methods where uuid package is used. For example:

• mock React hooks that make calls to server
• mock functions that making calls to the backend

[sw-tracker]

Thank you!

Can I override for a single story and/or component?

[gebeto]

Unfortunately not, this mocks is applying globally, but I have it in plans to add this feature later

[sw-tracker]

+1 for that feature :)