Как проверить localStorage с помощью Jest

Question

Я издевался над localStorage, как было предложено для другой угрозы, но я не могу заставить тесты работать, я пытался несколько раз безуспешно.

Это макет

class LocalStorageMock {
  constructor() {
    this.store = {};
  }
  clear() {
    this.store = {};
  }

  getItem(key) {
    return this.store[key] || null;
  }

  setItem(key, value) {
    this.store[key] = value.toString();
  }

  removeItem(key) {
    delete this.store[key];
  }
}

Это функция, которую я пытаюсь проверить.

const setToLS = (target, value) => {
  localStorage.setItem(target, JSON.stringify(value));
};
const saveToLS = (target, item) => {
  let items;
  if (localStorage.getItem(target)) {
    items = utilities.addItem(JSON.parse(localStorage.getItem(target)), item);
  } else {
    items = utilities.addItem([], item);
  }
  setToLS(target, items);
};

Это тест, который я не могу заставить работать.

describe('utilitiesLS', () => {

  describe('saveToLS', () => {
    it('should save item to LS')', () => {
      const target = 'recipes';
      const item = { name: 'salat', ingredients: 'spinach', id: 1 };
      utilitiesLS.saveToLS(target, item)
      expect(localStorage.store).toMatch( '{"recipes": [{"id": 1, "ingredient": "spinach", "recipeName": "salat"}]}'
      )
    });
  });
});

И это ошибка.

 expect(string)[.not].toMatch(expected)

    string value must be a string.
    Received: undefined

      29 |       const item = { recipeName: 'salat', ingredients: 'spinach', id: 1 };
      30 |       utilitiesLS.saveToLS(target, item)
    > 31 |       expect(localStorage.store).toMatch( '{"recipes": [{"id": 1, "ingredient": "spinach", "recipe
Name": "salat"}]}'
         |                                  ^
      32 |       )
      33 |     });
      34 |   });

Answer 1

Проблема в вашем тесте.

LocalStorageMock.store - это объект, но ваш тест expect(localStorage.store).toMatch( '{"reci... проверяет его на наличие строки. Вот почему ваш тест не проходит, потому что объекты не соответствуют строкам.

Чтобы исправить это, вы должны проверить:

  expect(localStorage.store).toEqual({"recipes": [{"id": 1, "ingredient": "spinach", "recipeName": "salat"}]})

То, что localStorage.store не определено, означает, что вы также не получаете созданный экземпляр вашего макета, который используется в вашем тесте.

n.b. Если вы пытаетесь смоделировать локальное хранилище, рассмотрите один из предварительно созданных, протестированных и документированных подходов, таких как: https://www.npmjs.com/package/jest-localstorage-mock