I am getting an issue “TypeError: Cannot read properties of undefined (reading ‘_context’)Jest” while writing Unit Test Case with jest in my react native project with java script.
I have follow below approach, Please review and let me know what I am doing wrong.
TestCase
test.only('Fill little about you form with correct details (student) and navigate to Create Password', async () => {
render(
<MockAuthContextProvider value={{postUserDetails}}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="LittleAboutYou"
component={LittleAboutYou}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Create Password"
component={CreatePassword}
options={{ headerShown: true }}
/>
</Stack.Navigator>
</NavigationContainer>
</MockAuthContextProvider>
);
await waitFor(() => {
const view = screen.getByTestId('little-about-you-view');
expect(view).toBeInTheDocument();
});
});
I have mocked AuthContext, implementation is below:
import React from 'react'
const MockAuthContext = React.createContext()
export const mockAuthContextValue = {
automaticLogin: jest.fn(),
logout: jest.fn(),
setAppleSignInData: jest.fn(),
setGoogleSignInData: jest.fn(),
// setRole: jest.fn(),
postUserDetails: jest.fn(),
postDemographics: jest.fn(),
loading: false,
role: 'student',
loginWithGoogle: jest.fn(),
googleSignInData: null,
loginWithApple: jest.fn(),
appleSignInData: null,
postUserDetailsExceptEmail: jest.fn(),
postFacultyDetails: jest.fn(),
setFacultySelectedInstitute: jest.fn(),
registrationID: '12345',
}
export const MockAuthContextProvider = ({ children, value }) => {
return <MockAuthContext.Provider value={value}>{children}</MockAuthContext.Provider>
}
export const MockAuthConsumer = (Child) => (props) =>
(
<MockAuthContext.Consumer>
{(context) => <Child {...props} {...context} />}
</MockAuthContext.Consumer>
)
LittleAboutYou is a UI Component for which I want to write test case, it has API calls
I have already mocked “axios”
function LittleAboutYou({ navigation }) {
const {
postUserDetails,
loading,
role,
loginWithGoogle,
googleSignInData,
loginWithApple,
appleSignInData,
postUserDetailsExceptEmail,
postFacultyDetails,
setFacultySelectedInstitute,
registrationID,
} = useContext(AuthContext)
const handleSubmit = async () => {
console.log("handleSubmit", role);
logToCloudWatch({ logMessage: `Submit button pressed` })
analytics().logEvent('letUsKnowAboutYou_submit_clicked', {
...values,
institution,
fields: field,
})
if (validate(values, role) !== '') {
showToast(validate(values, role))
return
}
//Status is 201 is already checked in Auth context
if (role === 'student') {
const res = await postUserDetails(values)
console.log("handleSubmit response", res);
//Status is 201 is already checked in Auth context
res && navigation.navigate(role === 'student' ? 'Create Password' : 'Create Password', {
email: values.email,
type: '',
})
} else if (role === 'faculty') {
const urlExpression =
/[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}.[a-z]{2,4}b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?/gi
const urlRegex = new RegExp(urlExpression)
if (institution === '') {
showToast('Institution cannot be empty')
return
}
if (!!values.googleScholarLink && !values.googleScholarLink.match(urlRegex)) {
showToast('Please enter a valid google scholar url')
return
}
if (field === '') {
showToast('Field cannot be empty')
return
}
const payload = {
...values,
institution,
fields: field,
}
setFacultySelectedInstitute(institution)
const response = await postFacultyDetails(payload)
response && navigation.navigate('Faculty: Select Profile', { userDetails: payload })
}
}
}
for more details please let me know.
Thanks in advance.
I have provided implementation, please review.