如何测试我的数据是否更改？（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 的数据吗？如果是这样，我该怎么做？

谢谢

【问题讨论】：

标签： unit-testing vue.js jestjs vuetify.js

【解决方案1】：

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

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

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

类似：

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

【讨论】：

明白了，这很有道理。但是，我如何测试它是否存在，从而导致“renderAdvancedFilters”然后存在？
您应该测试您的模板看起来应该如何。也许通过检查是否存在仅在renderAdvancedFilters 为真时才显示的特定元素