如何测试我的数据是不是更改？ （Vue JS、Jest、单元测试）

Posted 2023-02-22

【中文标题】如何测试我的数据是不是更改？ （Vue JS、Jest、单元测试）

【英文标题】：How do I test if my data changes? (Vue JS, Jest, Unit Testing)如何测试我的数据是否更改？ （Vue JS、Jest、单元测试）

【发布时间】：2020-04-25 08:54:26

【问题描述】：

我正在我的前端 Vue JS 项目中使用 Jest 对我的代码进行单元测试，我想编写的测试之一是：

it('should show the advanced filters if user_id exists', () => 
  )

这是 javascript 代码中创建的属性的一部分：

this.user_id = localStorage.getItem("user_id");
      if (this.user_id) 
        this.renderAdvancedFilters = true;
      

此外，以下是正在导出的部分数据：

export default 
  data: () => (
    renderAdvancedFilters: false,
    user_id: localStorage.getItem("user_id"),

因此，renderAdvancedFilters 最初设置为 false，但如果用户 id 存在，则将其设置为 true，然后显示高级过滤器。我如何编写一个单元测试来显示如果用户 id 存在，那么高级过滤器会显示在应用程序上？由于这是一个创建的属性，没有与要测试的应用程序交互，所以我认为我应该只是测试数据，但我不确定如何。

我应该模拟 this.user_id 的数据吗？如果是这样，我该怎么做？

谢谢

【参考方案1】：

我想你只需要模拟这个localStorage.getItem();。

模拟它以返回一个虚拟用户 ID，然后您只需运行测试并检查结果是否符合您的预期。

似乎这是您需要模拟的唯一依赖项。

类似：

global.localStorage = 
    getItem: jest.fn(() => 'some user id')
;

【讨论】：

明白了，这很有道理。但是，我如何测试它是否存在，从而导致“renderAdvancedFilters”然后存在？

您应该测试您的模板看起来应该如何。也许通过检查是否存在仅在renderAdvancedFilters 为真时才显示的特定元素