Getting error while using useHeaderHeight() in unit-testing

Question

Using @react-navigation/stack library in my project, while doing unit testing (using jest) I am getting this error

Couldn't find the header height. Are you inside a screen in Stack?

index.spec.js

  it('should have a title and subtitle', () => {
  const { getByText } = render(<Otp {...props} />);      });

Otp component

<SafeAreaView style={styles.mainContainer}>
  <KeyboardAvoidingView
    keyboardVerticalOffset={useHeaderHeight()} --> getting error at this line
  >
    <Text>...</Text>
  </KeyboardAvoidingView>
</SafeAreaView>

Also tried a solution in which I mocked a navigator but got no success.

Did you find a solution to this? Getting the same error. – bopbopbop Jun 01 '22 at 14:15 — bopbopbop, Jun 01 '22 at 14:15

score 0 · Answer 1 · answered Aug 30 '22 at 13:07

I came across the same issue today. What worked for me was to mock the entire module to return an object with useHederHeight. I think this is fine for unit testing and if you need to mock extra features you can do that too.

jest.mock('@react-navigation/elements', () => ({
  useHeaderHeight: jest.fn().mockImplementation(() => 200)
}))

Getting error while using useHeaderHeight() in unit-testing

1 Answers1