Problem to mock zustand #2343
-
|
Hello, everyone I'm trying to mock zustand in a small project using React Native and I'm having difficulty to do so. Here's my store, where export const useCartStore = create(
persist<StateProps>(
(set) => ({
products: [],
add: (product: ProductProps) =>
set((state) => ({
products: cartInMemory.add(state.products, product),
})),
remove: (productId: string) =>
set((state) => ({
products: cartInMemory.remove(state.products, productId),
})),
clear: () =>
set(() => ({
products: [],
})),
}),
{
name: 'iFud:cart',
storage: createJSONStorage(() => AsyncStorage),
},
),
);I followed the documentation to mock zustand in Herés the log I receive: And here's my packages versions: I don't know if the problem is in the mock or in the tests setup. I'd appreciate the help |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
@pedrohamarques would you mind sharing us a minimal repro on stackblitz? |
Beta Was this translation helpful? Give feedback.
-
|
I'm having some problem to configure it to run this specific tests suite, but here's the link: |
Beta Was this translation helpful? Give feedback.
-
|
@pedrohamarques the setup is a bit tricky talking about react native and other stuff but seems the issue is coming from AsyncStorage itself but here's the fix -> https://stackblitz.com/edit/vitejs-vite-fqgbku?file=src%2Fstores%2Fcart-store.ts |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, Danilo! I'd never think about this soluction, but it worked like a charm. Just one more question: how could I test if the method const cartStore = useCartStore();
const mockAddCartStore = jest.spyOn(cartStore, 'add');But I received the following error: |
Beta Was this translation helpful? Give feedback.
-
|
@pedrohamarques here you go const mockAddCartStore = jest.spyOn(cartStore.getState(), 'add'); |
Beta Was this translation helpful? Give feedback.
-
|
Apologies for reviving this thread but I am having the this exact issue with the same setup and the stackblitz link in the solution response is no longer working. Would it be possible to mention what was needed to fix the error? |
Beta Was this translation helpful? Give feedback.
-
|
Here's my store, I hope it helps. It was to define the const import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import * as cartInMemory from './helpers/cart-in-memory';
import type { ProductProps } from '@/utils/data/products';
import type { StateStorage } from 'zustand/middleware';
export type ProductCartProps = ProductProps & {
quantity: number;
};
type StateProps = {
products: ProductCartProps[];
add: (product: ProductProps) => void;
remove: (productID: string) => void;
clear: () => void;
};
const storage: StateStorage = {
getItem: async (name: string): Promise<string | null> => {
if (!AsyncStorage) return null;
return await AsyncStorage.getItem(name);
},
setItem: async (name: string, value: string): Promise<void> => {
if (!AsyncStorage) return;
return await AsyncStorage.setItem(name, value);
},
removeItem: async (name: string): Promise<void> => {
if (!AsyncStorage) return;
return await AsyncStorage.removeItem(name);
},
};
export const useCartStore = create(
persist<StateProps>(
(set) => ({
products: [],
add: (product: ProductProps) =>
set((state) => ({
products: cartInMemory.add(state.products, product),
})),
remove: (productId: string) =>
set((state) => ({
products: cartInMemory.remove(state.products, productId),
})),
clear: () =>
set(() => ({
products: [],
})),
}),
{
name: 'iFud:cart',
storage: createJSONStorage(() => storage),
},
),
); |
Beta Was this translation helpful? Give feedback.
@pedrohamarques the setup is a bit tricky talking about react native and other stuff but seems the issue is coming from AsyncStorage itself but here's the fix -> https://stackblitz.com/edit/vitejs-vite-fqgbku?file=src%2Fstores%2Fcart-store.ts