Mocking useGlobalState with jest?
k-patton opened this issue · comments
Hi, I was wondering if anyone has a way to mock this store for testing purposes? I have a page that renders differently depending on the contents of the store. I'm currently using jest and RTL. Thanks!
Hi, that's a good question. I'm not super experienced with mocking, so I wish someone else would jump in this topic.
What I would imagine is to a) mock the hook at module level, or b) use another createGlobalState for testing.
Hi so this might not work for every scenario, but in this case I was overthinking it. I was able to get the tests I needed by just setting the global state to my test values right in the beginning of my test. It's a "set" not a "mock" but it works.
On another testing note, has anyone heard of a way to see the current state of the store? Kind of like redux dev tools?
It does support redux devtools with createStore.
It should work for basic functionality.
Speaking of devtools, I maintain another library zustand which is similar to react-hooks-global-state, but more flexible (because I made react-hooks-global-state to provide api that will never be misused, it's limited in a sense.) Just yesterday, I fixed the devtools module in zustand, which should be more stable. It's not released yet, but you might want to have a look.
@k-patton I have exposed the getGlobalState and getState at the window level - so I can actually call window.getGlobalState() (for example) and see a console log of things. You could use those to create your own dev panel in your application as well. Kent Dodds has some interesting examples of using his testing-library for doing things like that... https://kentcdodds.com/blog/make-your-own-dev-tools/
also - we have just taken a similar approach in our Jest testing.
We actually wrap a lot of functions in an "api" - including the useGlobalState - so we can initialise the global state with anything we want in our tests (including using all our default state).
Hi, I have same problem, and found the way to resolve it.
In my Code...
// AComponent.tsx
...
export const { dispatch, useGlobalState } = createStore(reducer, initialState);
// BComponent.tsx
import { useGlobalState } from './AComponent';
...
{
const [test, setTest] = useGlobalState('test')
}
So, my solution is like that,
mock that import module
const initialState: MyState = {
test: {}
};
const { setGlobalState, useGlobalState } = createGlobalState(initialState);
jest.mock('./AComponent', () => {
return {
useGlobalState: jest.fn().mockImplementation((args) => useGlobalState(args))
};
})
within the test code, we can modify that state with setGlobalState
...
test('test', () => {
...
setGlobalState('test', {value: true});
const wrapper = mount(<BComponent>);
// then check the component itself.
I want this will help you, @k-patton
v2 is released and closing this.