Soru Jest testlerinde localStorage ile nasıl baş edebilirim?


Jest testlerinde "localStorage tanımlı değil" ifadesini almaya devam ediyorum, ancak seçeneklerim neler? Tuğla duvarlara çarpmak.


65
2017-10-02 16:25


Menşei




Cevaplar:


Büyük çözüm @chiedo

Bununla birlikte, ES2015 sözdizimini kullanıyoruz ve bu şekilde yazmanın biraz daha temiz olduğunu hissettim.

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];
  }
};

global.localStorage = new LocalStorageMock;


86
2018-01-03 00:02



Muhtemelen yapmalı value + '' seterde null ve undefined değerlerin doğru şekilde ele alınması - menehune23


Bunun yardımıyla şu şekilde düşündüm: https://groups.google.com/forum/#!topic/jestjs/9EPhuNWVYTg

Aşağıdaki içeriklere sahip bir dosya kurun:

var localStorageMock = (function() {
  var store = {};
  return {
    getItem: function(key) {
      return store[key];
    },
    setItem: function(key, value) {
      store[key] = value.toString();
    },
    clear: function() {
      store = {};
    },
    removeItem: function(key) {
      delete store[key];
    }
  };
})();
Object.defineProperty(window, 'localStorage', { value: localStorageMock });

Ardından Jest yapılandırmanızın altına aşağıdaki satırı paketiniz.jsonuna eklersiniz.

"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",


65
2017-10-02 16:33



Görünüşe göre güncellemelerin birinde bu parametrenin adı değişti ve şimdi "setupTestFrameworkScriptFile" olarak adlandırılıyor - Grzegorz Pawlik
"setupFiles": [...] de çalışır. Dizi seçeneği ile alayları ayrı dosyalara ayırmaya izin verir. Örneğin.: "setupFiles": ["<rootDir>/__mocks__/localStorageMock.js"] - Stiggler
Dönüş değeri getItem Hiçbir veri belirli bir anahtara göre ayarlanmamışsa, bir tarayıcı tarafından ne iade edileceğinden biraz farklıdır. çağrı getItem("foo") ayarlanmadığı zaman örneğin geri dönecektir null bir tarayıcıda undefined Bu sahte tarafından - bu benim testlerden birinin başarısız olmasına neden oldu. Benim için basit bir çözüm geri dönmek oldu store[key] || null içinde getItem fonksiyon - Ben Broadley
eğer böyle bir şey yaparsan bu işe yaramaz localStorage['test'] = '123'; localStorage.getItem('test') - rob
Bu örnekte IIFE nedir? Bunu yapmamın herhangi bir sebebi: Object.defineProperty(window, 'localStorage', { value: { store: {}, getItem: function(key) { return this.store[key] || null; }, setItem: function(key, value) { this.store[key] = value.toString(); }, clear: function() { this.store = {}; } } }); - Nick


Create-react-app kullanıyorsanız, açıklandığı gibi daha basit ve basit bir çözüm var belgeleme.

yaratmak src/setupTests.js ve bunu içine koy:

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

Tom Mertz'in katkısı aşağıdaki gibidir:

Daha sonra, localStorageMock işlevlerinizin,

expect(localStorage.getItem).toBeCalledWith('token')
// or
expect(localStorage.getItem.mock.calls.length).toBe(1)

Test edildiğinde emin olmak istediniz. Çıkış yapmak https://facebook.github.io/jest/docs/en/mock-functions.html


18
2017-12-20 00:52



Merhaba c4k! Bunu testlerinizde nasıl kullanacağınıza bir örnek verebilir misiniz? - Dimo
Ne demek istiyorsun ? Testlerinizde hiçbir şeyi başlatmanız gerekmez, sadece otomatik olarak alay eder localStorage kodunda kullanırsın. (Eğer kullanırsan create-react-app ve doğal olarak sunduğu tüm otomatik komut dosyaları) - c4k
Daha sonra, localStorageMock işlevlerinizin, expect(localStorage.getItem).toBeCalledWith('token') veya expect(localStorage.getItem.mock.calls.length).toBe(1) Test edildiğinde emin olmak istediniz. Çıkış yapmak facebook.github.io/jest/docs/en/mock-functions.html - Tom Mertz


Daha iyi bir alternatif undefined değerler (sahip değil toString()) ve döner null değer mevcut değilse. Bunu test ettik react v15, redux ve redux-auth-wrapper 

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

  clear() {
    this.store = {}
  }

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

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

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

global.localStorage = new LocalStorageMock

10
2018-05-01 08:42



Ekleme fikri için Alexis Tyler'a teşekkürler removeItem: developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem - Dmitriy
"Null" ve "undefined" (null dizeleri) ile sonuçlanacak null ve undefined ihtiyacına inanın - menehune23


ya da sadece böyle bir sahte paket almak:

https://www.npmjs.com/package/jest-localstorage-mock

Sadece depolama işlevselliğini değil, aynı zamanda mağazanın gerçekten aranıp tanınmadığını test etmenizi de sağlar.


8
2017-10-25 12:00





Typescript ile bir proje için çözmek için burada bazı cevapları riffed. Bunun gibi bir LocalStorageMock oluşturdum:

export class LocalStorageMock {

    private store = {}

    clear() {
        this.store = {}
    }

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

    setItem(key: string, value: string) {
        this.store[key] = value
    }

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

Ardından, global yerel depolama değişkenine doğrudan erişmek yerine, uygulamadaki yerel depolamaya tüm erişim için kullandığım bir LocalStorageWrapper sınıfı oluşturdum. Testler için ambalajdaki sahte değeri ayarlamanızı kolaylaştırdı.


0
2017-12-04 20:10





@ Ck4'ün önerdiği gibi belgeleme kullanmak için açık bir açıklama var localStorage jest olarak. Ancak, sahte işlevlerin hiçbirini gerçekleştiremediler localStorage yöntemleri.

Aşağıda, veri yazma ve okuma için soyut yöntemlerden yararlanan tepkisel bileşenimin ayrıntılı bir örneği yer almaktadır.

//file: storage.js
const key = 'ABC';
export function readFromStore (){
    return JSON.parse(localStorage.getItem(key));
}
export function saveToStore (value) {
    localStorage.setItem(key, JSON.stringify(value));
}

export default { readFromStore, saveToStore };

Hata:

TypeError: _setupLocalStorage2.default.setItem is not a function

Fix:
Jest için aşağıdaki mock işlevini ekleyin (yol: .jest/mocks/setUpStore.js )

let mockStorage = {};

module.exports = window.localStorage = {
  setItem: (key, val) => Object.assign(mockStorage, {[key]: val}),
  getItem: (key) => mockStorage[key],
  clear: () => mockStorage = {}
};

Snippet'ten referans alındı İşte


0
2018-05-17 00:52