[QUnit] mock storage 사용하기

QUnit은 local server에서 구동할것이기 때문에 webpack으로 dev server 설정을 먼저 하세요.

WEBPACK DEV SERVER 구동하기

js/index.js

실제 개발 코드가 되겠습니다.

// Storage에 데이터를 저장한다.
let myphone
localStorage.setItem('mySmartPhone', 'iPhone')
myphone = localStorage.getItem('mySmartPhone')

console.log('내 폰은 ' + myphone + ' 입니다.')

localStorage에 mySmartPhone 의 실제값은 iPhone이 들어갑니다.

__test__/index.spec.js

// mockStorage 함수를 생성한다.
QUnit.begin(() => {
    const mock = (() => {
        let store = {};
        return {
            getItem: key => {
                return store[key];
            },
            setItem: (key, value) => {
                store[key] = value.toString();
            },
            clear: () => {
                store = {}
            }
        }
    })()
    
    Object.defineProperty(window, 'localStorage', {
        value: mock,
    });
});


QUnit.test('mock storage 테스트', assert => {
    localStorage.setItem('mySmartPhone', 'Gallexy')
    myphone = localStorage.getItem('mySmartPhone')
    assert.equal(myphone, 'Gallexy', '내 폰은 Gallexy 입니다.')
})

QUnit으로 테스트시에는 Gallexy값을 넣습니다.

(실제 localStorage의 값은 건드리지 않습니다.)

Webpack dev server 구동

WEBPACK DEV SERVER 구동하기 포스트를 참조하세요.

$ npm run server

테스트가 통과되었습니다.

하지만 실제 local storage에는 iPhone이 그대로 들어가 있습니다.