react testing with rtl, useselector value not getting as expected

12 Views Asked by At

In react app implemented multitencay, and loading but not working as expected

test.only('should display only relevant search results when a user searches for a lesson by lesson name', async () => { useSelector.mockImplementation((callback) => callback({ userSaving: mockUser, lessonsLoad: true, }) );

  jest.useFakeTimers(); // need fake timers because search has debounce / delay

  axios.get.mockImplementationOnce((mockUrl) => {
    switch (mockUrl) {
      case lessonsUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.Lessons);
      case aircraftFilterUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterAircraft);
      case statusUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterStatuses);
      case flightPhaseFilterUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterFlightPhase);
      default:
        return Promise.reject(new Error('not found'));
    }
  });

  renderLessonLibraryContainer();

  expect(screen.getByTestId('lessons-search-skeleton')).toBeInTheDocument();

  useSelector.mockClear();

  useSelector.mockImplementation((callback) =>
    callback({
      userSaving: mockUser,
      lessonsLoad: false,
    })
  );

  expect(await screen.findByRole(rtlRoles.ROW, { name: lesson1RowText })).toBeInTheDocument();
  expect(await screen.findByRole(rtlRoles.ROW, { name: lesson2RowText })).toBeInTheDocument();

  //   expect(screen.queryByTestId('lessons-search-skeleton')).toBeNull();

  // Lesson Name search
  await searchTypeHelper('2');

  expect(screen.getByRole(rtlRoles.ROW, { name: lesson2RowText })).toBeVisible();
  expect(screen.queryByRole(rtlRoles.ROW, { name: lesson1RowText })).toBeNull();
});

content should be visible, after using 2nd useselector but not giving expected

test.only('should display only relevant search results when a user searches for a lesson by lesson name', async () => { useSelector.mockImplementation((callback) => callback({ userSaving: mockUser, lessonsLoad: true, }) );

  jest.useFakeTimers(); // need fake timers because search has debounce / delay

  axios.get.mockImplementationOnce((mockUrl) => {
    switch (mockUrl) {
      case lessonsUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.Lessons);
      case aircraftFilterUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterAircraft);
      case statusUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterStatuses);
      case flightPhaseFilterUrl:
        return Promise.resolve(mockAPIResponseV2.GET.Success.FilterFlightPhase);
      default:
        return Promise.reject(new Error('not found'));
    }
  });

  renderLessonLibraryContainer();

  expect(screen.getByTestId('lessons-search-skeleton')).toBeInTheDocument();

  useSelector.mockClear();

  useSelector.mockImplementation((callback) =>
    callback({
      userSaving: mockUser,
      lessonsLoad: false,
    })
  );

  expect(await screen.findByRole(rtlRoles.ROW, { name: lesson1RowText })).toBeInTheDocument();
  expect(await screen.findByRole(rtlRoles.ROW, { name: lesson2RowText })).toBeInTheDocument();

expect(screen.queryByTestId('lessons-search-skeleton')).toBeNull();

  // Lesson Name search
  await searchTypeHelper('2');

  expect(screen.getByRole(rtlRoles.ROW, { name: lesson2RowText })).toBeVisible();
  expect(screen.queryByRole(rtlRoles.ROW, { name: lesson1RowText })).toBeNull();
});
0

There are 0 best solutions below