Реагируйте, как протестировать Redirect на основе элемента localStorage

Question

У меня есть компонент, который проверяет наличие ключа локального хранилища и на основании этого решает, следует ли отобразить компонент или перенаправить на экран входа в систему.

Я хочу проверить этот случай, используя шутки и энзимы, но я не могу заставить код использовать фиктивное localstorage, а не реальное браузерное locastorage.

Прямо сейчас кодируйте его, пытаясь прочитать localalstorage, и он всегда получает нулевое значение.

Я уже потратил 2-3 часа и следил за многими вопросами stackobverflow, но большинство из них пытаются смоделировать localalstorage и проверить, устанавливает ли он и читает ли значения из fake localalstorage.

Я думаю, что мой случай другой, потому что я хочу подделать localalstorage, но этот вывод должен повлиять на решение компонента.

Ниже мой код компонента

        // Below console.log prints null when i run test, which i think should print { "googleId" : null} , isnt it ?
        console.log(localStorage.getItem("auth")); 
        let storageUser = JSON.parse(localStorage.getItem("auth"));
        if (!storageUser || !storageUser.googleId){
            return <Redirect to="/login" />
        }

        return (
            <Home user  = {user} />
        )
    }

и мой тестовый код

it("Renders Home page if googleId is set in localStorage", () => {
    const localStorage = jest.fn();
    global.localStorage.getItem = key => '{ "googleId" : null}';

    // Below code prints { "googleId" : null}
    console.log(localStorage.getItem("auth"));

    expect(wrapper.find(Home).length).toEqual(1);
});

Answer 1

Я бы рекомендовал использовать jest-localstorage-mock - процесс установки не должен быть сложным.

Включив пакет в свои тесты, вы получаете доступ к ложному LS, которым можно легко управлять, например:

localStorage.__STORE__["auth"] = your_desired_object;

Вот краткий пример, который может соответствовать вашей проблеме, а также демонстрация тестирования различных условных выражений в подобных случаях:

beforeEach(() => {
   // According to the documentation: "values stored in tests will also be available in other tests unless you run"
   localStorage.clear();
});

describe("when `auth` does not exist in the localStorage", () => {
   it("redirects the user to the `login` page", () => {
      // ...
   });
});

describe("when `auth` exists in the localStorage", () => {
   describe("when `googleId` is not defined", () => {
      it("redirects the user to the `login` page", () => {
         // ...
      });
   });

   describe("when `googleId` is defined", () => {
      it("renders `Home`", () => {
        // Ensures if the `Home` page is rendered if the last circumstance occurs.
      });
   });
});