Mocking useGlobalState with jest? about react-hooks-global-state HOT 8 CLOSED

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.

from react-hooks-global-state.

@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/

from react-hooks-global-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

from react-hooks-global-state.

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.

from react-hooks-global-state.

On another testing note, has anyone heard of a way to see the current state of the store? Kind of like redux dev tools?

from react-hooks-global-state.

It does support redux devtools with createStore.

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.

from react-hooks-global-state.

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).

from react-hooks-global-state.

v2 is released and closing this.

from react-hooks-global-state.