在前端测试 react + redux 应用程序时忽略与浏览器相关的变量

Ignoring browser-related variables while frontend testing react + redux app

本文关键字：浏览器 变量 测试 前端 react 应用程序 redux      更新时间：2023-09-26

我目前正在使用摩卡进行前端测试我的 react/redux 应用程序。

似乎每当我的函数中有与浏览器相关的变量时，测试就会失败。

例如，我的一个函数如下所示：

export const loginUserSuccess = (token, user) => {
    localStorage.setItem('token', token); // browser-related variable here
    return {
        type: LOGIN_USER_SUCCESS,
        payload: {
            token: token,
            user: user
        }
    }
}

注意我对localStorage的使用。此变量在测试时显然不可用，因此任何碰巧触发loginUserSuccess操作的测试都不会通过。老实说，我根本不需要测试 localStorage 逻辑——我只希望动作返回正确的东西。但即使我做这样的事情：

if (localStorage) localStorage.setItem('token', token);

我仍然收到一个错误，说本地存储未定义。如何让测试模块忽略某些变量？

另一个示例是当操作调用全局window时。进行 API 调用时，我会让我的操作查看窗口以查看将其请求发送到何处：

export const createUserInAuthStore = (username, password) => {
    let url = `${window.__BASE_URL__}/auth/user/` // look at the window here
    let data = { username, password }
    return request
      .post(url)
      .type('form')
      .send(data)
      .end()
      .then((response) => {
        return {
            token: response.body.token,
            username
        }
      })
      .catch((error) => Promise.reject(error))
}

显然，摩卡抱怨第 3 行的窗口未定义。但即使我将那行固定为此：

let baseurl = window ? window.__BASE_URL__ : 'api.dockerhost'

摩卡继续抛出错误。

TL;DR：有没有办法在测试时忽略或替换与浏览器相关的变量？

在 mocha 中，所有全局可用的变量都以 global 为前缀。所以要嘲笑你的localStorage，你可以这样做

global.localStorage = {
    setItem: function () {}
}

对于您的窗口，您可以执行以下操作：

global.window = {
    __BASE_URL__: "/bla/whatever"
}

并且不要忘记在之后再次删除它们以避免影响其他测试（我通常在afterEach()函数中这样做）。

相关文章：