We Keep Coding

React Native: TypeError: navigationRef.isReady is not a function. (In 'navigationRef.isReady()'

in my react-native app App.js I setup a listener for firebase notifications, I also setup navigation in order to navigate and get current name inside notif handler functions, however when my app mounts I get this error:
TypeError: navigationRef.isReady is not a function. (In 'navigationRef.isReady()', 'navigationRef.isReady' is undefined)
getCurrentRoute
In my App.js file
import { navigationRef, isReadyRef, getCurrentRoute, navigate } from '#env/RootNavigation.js';
useEffect(() =>
{
console.log('APP STARTED');
registerListener();
}, []);
const registerListener = () =>
{
messaging().onMessage((message) => {
handleForegroundNotification(message);
});
};
const handleForegroundNotification = (message) =>
{
let routeName = getCurrentRoute();
Alert.alert(routeName);
};
<NavigationContainer ref={navigationRef} onReady={ () => { isReadyRef.current = true; } }>
<ROOTSTACK1></ROOTSTACK1>
</NavigationContainer>
In my RootNavigation file:
import * as React from 'react';
export const isReadyRef = React.createRef();
export const navigationRef = React.createRef();
export function navigate(name, params) {
if (isReadyRef.current && navigationRef.current) {
// Perform navigation if the app has mounted
navigationRef.current.navigate(name, params);
} else {
// You can decide what to do if the app hasn't mounted
// You can ignore this, or add these actions to a queue you can call later
}
};
export function getCurrentRoute(){
if (navigationRef.isReady()) {
const route=navigationRef.getCurrentRoute();
console.log(route);
// sample output {key:"Home-k2PN5aWMZSKq-6TnLUQNE",name:"Home"}
return route.name;
}
};

Documentation states to use createNavigationContainerRef vs React.createRef.
So it would be
export const navigationRef = createNavigationContainerRef();
from https://reactnavigation.org/docs/navigating-without-navigation-prop

How to mock react custom hook return value as a module with Jest

I need to mock my custom hook when unit testing React component. I've read some stackoverflow answers but haven't succeeded in implementing it correctly.
I can't use useAuth without mocking it as it depends on server request and I'm only writing unit tests at the moment.
//useAuth.js - custom hook
const authContext = createContext();
function useProvideAuth() {
const [accessToken, setAccessToken] = useState('');
const [isAuthenticated, setAuthenticated] = useState(
accessToken ? true : false
);
useEffect(() => {
refreshToken();
}, []);
const login = async (loginCredentials) => {
const accessToken = await sendLoginRequest(loginCredentials);
if (accessToken) {
setAccessToken(accessToken);
setAuthenticated(true);
}
};
const logout = async () => {
setAccessToken(null);
setAuthenticated(false);
await sendLogoutRequest();
};
const refreshToken = async () => {
const accessToken = await sendRefreshRequest();
if (accessToken) {
setAccessToken(accessToken);
setAuthenticated(true);
} else setAuthenticated(false);
setTimeout(async () => {
refreshToken();
}, 15 * 60000 - 1000);
};
return {
isAuthenticated,
accessToken,
login,
logout
};
}
export function AuthProvider({ children }) {
const auth = useProvideAuth();
return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}
AuthProvider.propTypes = {
children: PropTypes.any
};
const useAuth = () => {
return useContext(authContext);
};
export default useAuth;
The test I've written
//mainPage.test.js
import React from 'react';
import { render, screen } from '#testing-library/react';
import Main from '../main/mainPage';
describe('Main when !isAuthenticated', () => {
beforeEach(() => {
jest.mock('../auth/useAuth', () => {
const originalModule = jest.requireActual('../auth/useAuth');
return {
__esModule: true,
...originalModule,
default: () => ({
isAuthenticated: false,
login: jest.fn,
logout: jest.fn
})
};
});
});
afterEach(() => {
jest.resetModules();
});
it('displays image and login form', () => {
render(<Main />);
const image = screen.getByRole('img');
const form = document.querySelector('[data-testid=loginForm]');
expect(image).toBeInTheDocument();
expect(form).toBeInTheDocument();
});
});
However, I get this error.
TypeError: Cannot read properties of undefined (reading 'isAuthenticated')
7 |
8 | function Main() {
> 9 | const isAuthenticated = useAuth().isAuthenticated;
| ^
10 | const location = useLocation();
11 |
12 | if (isAuthenticated)
at Main (src/main/mainPage.js:9:26)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)...
I've been also trying to use spyOn but nothing helped. What exactly do I need to change to make the mock work?

The mocking should happen before any describe block:
import React from 'react';
import { render, screen } from '#testing-library/react';
import Main from '../main/mainPage';
jest.mock('../auth/useAuth', () => {
const originalModule = jest.requireActual('../auth/useAuth');
return {
__esModule: true,
...originalModule,
default: () => ({
isAuthenticated: false,
login: jest.fn,
logout: jest.fn
})
};
});
describe('Main when !isAuthenticated', () => {

How to write test case for a component which is calling a method using jest

I am new to Jest and Enzyme & facing an issue. Can someone help?
Here is my jsx file (myTemplate.jsx) :
export default (props) => {
const oneSection = () => {
return <div>Hello</div>
};
return (
props.hasData ? { <div>Hey</div> } : { <div><oneSection/></div> }
)
}
And this is my test file :
import React from "react";
import { shallow } from "enzyme";
import myTemplate from '../myTemplate';
describe("template component", () => {
const props= {
hasData: false,
}
let myComponent = null;
beforeAll(() => {
myComponent = shallow(<myTemplate {...props}/>);
})
test("should render with initial state properly", () => {
expect(myComponent).toMatchSnapshot();
})
})
Now this test case is running successfully. Snapshot is getting created with a div which has oneSection but oneSection is not getting replaced with actual html within it. Basically these lines are not getting covered :
const oneSection = () => {
return <div>Hello</div>
};
How can i cover this piece of code using Jest and enzyme ?

import React from 'react'
import { cleanup, render } from '#testing-library/react'
describe('DMReports', () => {
afterEach(cleanup)
test('DMReports: hasData true', () => {
const { container } = render(
<DMReports hasData={true}/>,
)
expect(container).toMatchSnapshot()
})
test('DMReports: hasData false', () => {
const { container, getByText } = render(
<DMReports hasData={false}/>,
)
expect(container).toMatchSnapshot()
expect(getByText('Hello')).toBeTruthy()
})
})

How to mock useEffect async calls with react-native-testing-library?

I'm trying to test the screen that has useEffect hook with the following:
export const SomeScreen: React.FC<Props> = ({}) => {
const [isSensorAvailable, setIsSensorAvailable] = useState(false);
useEffect(() => {
const isSensorAvailableCheck = async () => {
try {
await FingerprintScanner.isSensorAvailable();
setIsSensorAvailable(true);
} catch (error) {
console.log(error);
}
};
isSensorAvailableCheck();
}, []);
...
Here goes code that renders View if the sensor is available
...
}
And I'm trying the following test:
import {default as FingerprintScannerMock} from 'react-native-fingerprint-scanner';
jest.mock('react-native-fingerprint-scanner');
(FingerprintScannerMock.isSensorAvailable as jest.Mock).mockResolvedValue(true);
const createTestProps = (props: Object) => ({
navigation: {
navigate: jest.fn(),
},
...props,
});
describe('Testing some screen', () => {
test('testing some functionalities', async () => {
let props: any;
props = createTestProps({});
const component = render(
<Provider store={store}>
<RegisterPasswordScreen {...props} />
</Provider>,
);
const {getByText, getByTestId, getAllByTestId} = component;
const container = getByTestId('containerId');
expect(container).toBeTruthy();
});
});
But this container is never found because setIsSensorIsAvailable never sets the value to true because of the following error:
An update to SomeScreen inside a test was not wrapped in act(...).
I tried everything even like this:
const component = await waitFor(() =>
render(<Provider store={store}>
<RegisterPasswordScreen {...props} />
</Provider>,
);
);
But when I run this test it never ends. Tried also to wrap it with act(...) but that does not work either, then the error is following:
Can't access .root on unmounted test renderer.
Any help appreciated, thanks!

Had a similar issue
Wrapping the component using act(https://reactjs.org/docs/testing-recipes.html#act) solved my issue
Using create to wrap your component for react native instead of using a typical render method wrapped in act
import { act, create } from 'react-test-renderer';
it('test', () => {
await act(async () => {
create(<ComponentWithAsyncUseEffect />);
});
})

I ended up using findByTestId rather than getByTestId and now it works well.

Mocking fetch with jest.fn() in React

I'm wondering why I need to put fetch mock logic inside my test to make it work.
Here is simple example:
Component to test with fetch inside useEffect and state update after response:
// Test.jsx
import React, {useEffect, useState} from 'react'
export const Test = () => {
const [description, setDescription] = useState<string | null>(null)
const fetchData = async () => {
const response = await fetch('https://dummyendpoint/');
const parsed = await response.json();
const description = parsed.value;
setDescription(description);
}
useEffect(() => {
fetchData();
}, [])
return (
<div data-testid="description">
{description}
</div>
)
};
export default Test;
Test logic:
// Test.test.js
import React from 'react';
import {render, screen} from '#testing-library/react';
import Test from "./Test";
global.fetch = jest.fn(() => Promise.resolve({
json: () => Promise.resolve({
value: "Testing something!"
})
}));
describe("Test", () => {
it('Should have proper description after data fetch', async () => {
// need to put mock logic here to make it work
render(<Test/>);
const description = await screen.findByTestId('description');
expect(description.textContent).toBe("Testing something!");
});
})
If I keep global.fetch mock at the top of my test file, I keep getting an error:
TypeError: Cannot read property 'json' of undefined
at const parsed = await response.json();

It's really strange that it does not work as it is.
But I was able to fix it by moving the setup into beforeEach block (I assume beforeAll would also work).
It is a common pattern to backup global variable value, override it for tests and restore it back.
import React from 'react';
import { render, screen } from '#testing-library/react';
import Test from "./Test";
describe("Test", () => {
let originalFetch;
beforeEach(() => {
originalFetch = global.fetch;
global.fetch = jest.fn(() => Promise.resolve({
json: () => Promise.resolve({
value: "Testing something!"
})
}));
});
afterEach(() => {
global.fetch = originalFetch;
});
it('Should have proper description after data fetch', async () => {
// need to put mock logic here to make it work
render(<Test />);
const description = await screen.findByTestId('description');
expect(description.textContent).toBe("Testing something!");
});
});