Question

我有一个组件，用于检查本地存储密钥，并以此为基础决定是呈现组件还是重定向到登录屏幕。

我想使用玩笑和酶来测试这种情况，但是我无法强制代码使用模拟本地存储，而不是实际的浏览器定位。

现在对它进行编码，以尝试读取本地存储，并且它始终获得空值。

我已经花了2-3个小时的时间，并遵循了许多stackobverflow问题，但是大多数人都在尝试模拟localstorage并检查它是否设置并从伪造的localstorage中读取值。

我认为我的情况有所不同，因为我想伪造本地存储，但是该输出应该影响组件决策。

下面是我的组件代码

        // 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.
      });
   });
});

React Jest如何测试基于localStorage的重定向

1 个答案: