Jest mocked MobX store not resetting between tests - reactjs

Question

I have a simple login component and a MobX store which is supposed to hold some user information. I want to test this integration with Jest. The app is created with Create React App, so I am just building off that for my tests.
My Login component looks like this:
const Login = () => {
const { accountStore, userStore } = useStores();
const { user } = userStore;
return(
<>
{user ?
<>
<h1>{user.fullName}</h1>
<h2>{user.username}</h2>
</>
:
<main className="form-signin">
<Button onClick={accountStore.RedirectToFeide} aria-label='sign-in-with-feide-button'>Sign in with Feide</Button>
<Button onClick={userStore.GetCurrentUser} aria-label='get-info-button'>Get Current User Info</Button>
</main>
}
</>
)
}
export default observer(Login);
My RootStore looks like this and provides the useStores hook:
export class RootStore {
public userStore: UserStore;
public accountStore: AccountStore;
constructor() {
this.userStore = new UserStore(this);
this.accountStore = new AccountStore(this);
}
}
const StoresContext = createContext(new RootStore());
export const useStores = () => useContext(StoresContext);
If the user in the store is present I would like to see their information. If not I would like to see the two buttons.
I have mocked the UserStore in a folder called __mocks__ like this:
class UserStore {
private rootStore: RootStore;
public user?: User;
constructor (rootStore: RootStore) {
makeAutoObservable(this)
this.rootStore = rootStore;
}
#action
GetCurrentUser = async () => {
this.user = {
username: 'username',
fullName: 'Test User',
dateOfBirth: new Date('1994-03-15'),
email: 'test#example.com'
}
}
}
export default UserStore;
When I use jest.mock() in my test the GetCurrentUser method is mocked correctly, and the mocked data is set in the user object. However, I have not been able to reset the user object before doing a new test in any way.
I have tried:
Mocking in beforeEach/afterEach
jest.clearAllMocks(), jest.resetAllMocks() and jest.restoreAllMocks() both within beforeEach and without
Adding and removing describes to isolate tests
The test looks like this:
import React from 'react';
import { fireEvent, render } from '#testing-library/react';
import Login from './Login';
jest.mock('../../stores/UserStore')
beforeEach(() => {
jest.clearAllMocks()
})
describe('User is logged in', () => {
test('Login shows users name after getting current user information', async () => {
const { getByText } = render(<Login />);
fireEvent.click(getByText('Get Current User Info'));
expect(getByText('Test User')).toBeInTheDocument()
})
})
describe('User not logged in', () => {
test('Login should show sign in button', () => {
const { getByText } = render(<Login />)
expect(getByText('Sign in')).toBeInTheDocument();
})
})
Since the first test presses the button and sets the user observable the second test fails. How can I reset the entire mocked store between each test?

Answer 1

I had similar issue because I was using React Context without Provider.
After wrapping the main app with provider like:
const StoreContext = createContext<RootStore | undefined>(undefined);
export function RootStoreProvider({
children,
rootStore,
}: {
children: ReactNode;
rootStore: RootStore;
}) {
return (
<StoreContext.Provider value={root}>{children}</StoreContext.Provider>
);
}
export const useStores = () => useContext(StoresContext);
I also modified render function from #testing-library/react to accept more arguments:
type CustomRenderTypes = RenderOptions & {rootStore?: RootStore;};
function customRender(
ui: ReactElement,
{rootStore, ...options}: CustomRenderTypes = {},
): RenderResult {
const store = rootStore || new RootStore();
return render(ui, {
wrapper: ({ children }) => {
return (
<RootStoreProvider rootStore={store}>
{children}
</RootStoreProvider>
);
},
...options,
});
}
And after that every test case was getting the fresh copy of store and there was no need to reset mocks

Answer 2

Try to include import of the hook you are mocking in your test-file.
OR
You can try to mock it another way: include import of useStores hook in the test. Then you call jest.mock('useStores'). And then you should mock its implementation.
import useStores from '../../stores/UserStore')
jest.mock('useStores')
useStores.mockImplementation(() => someDummyData)
Described solution you can find in docs.