React-native - Jest测试在使用useFocusEffect()时失败- error找不到导航对象,您的组件是否在NavigationContainer中?

sgtfey8w  于 2023-06-20  发布在  Jest
关注(0)|答案(2)|浏览(219)

我修改了一个现有的react-native程序。我已经添加了useFocusEffect()钩子,以便在从另一个屏幕(子组件)返回时在屏幕中获取数据。程序按预期工作,但是,之前编写的Jest测试用例失败,原因如下:

Home › should render screen without error
Couldn't find a navigation object. Is your component inside NavigationContainer?
> 24 |   useFocusEffect(
     |   ^
  25 |     React.useCallback(() => {
  26 |       fetchData();
  27 |     }, [fetchData])

相关试验如下:

import { Home } from './Home';

jest.mock('hooks/Auth/useLoadAuthStudentsData', () => ({
  useLoadAuthStudentData: jest.fn()
}));

jest.mock('hooks/Student/useStudents', () => ({
  useStudents: jest.fn()
}));

jest.mock('@react-navigation/core', () => {
  return {
    ...jest.requireActual('@react-navigation/core'),
    useNavigation: jest.fn(() => ({}))
  };
});

const useLoadAuthStudentsData = userHook as ReturnType<typeof jest.fn>;
const useStudents = tasksHook as ReturnType<typeof jest.fn>;

  describe('Home', () => {
  beforeEach(() => {
    useStudents.mockReturnValue({
      data: Student.deserializeAsList(studentsStub),
      isLoading: false,
      isSuccess: true,
      isError: false
    });
    useLoadAuthUserData.mockReturnValue({ data: studentStub });
  });

  it('should render screen without error', () => {
    expect(render(<Home />)).toBeTruthy();
  });

  it('should render loader if data is loading', () => {
    useStudents.mockReturnValue({
      data: undefined,
      isLoading: true,
      isSuccess: undefined,
      isError: undefined
    });

    const { getByTestId } = render(<Home />);

    expect(getByTestId('students-layout')).toBeTruthy();
  });
qoefvg9y

qoefvg9y1#

你可以试着改变一下:

jest.mock('@react-navigation/core', () => {
  return {
    ...jest.requireActual('@react-navigation/core'),
    useNavigation: jest.fn(() => ({}))
  };
});

致:

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useNavigation: jest.fn(() => ({}))
  };
});

如果这还不够,那么请确保屏幕被 Package 在导航容器和导航器中,因为钩子依赖于导航堆栈中的组件

vof42yt1

vof42yt12#

我遇到了同样的问题,并通过以下方式解决:

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useFocusEffect: jest.fn(() => ({})),
  };
});

相关问题