模拟窗口的最佳方法是什么,会话jest中的存储

h7appiyu 于 2023-02-14 发布在 Jest

关注(0)|答案(4)|浏览(142)

下面是一个非常简单的jest单元测试，当运行它时，您将得到如下错误
无法对基元值执行spyOn;未定义给定
TypeError：无法读取未定义的属性"getItem"
但是根据this post的最后两个注解，localStorage和sessionStorage已经添加到最新的JSDOM和jest中。如果使用jest-localstorage-mock并将其添加到我的jest setupFiles中，则会看到如下奇怪的错误
类型错误：对象[methodName]. mockImplementation不是函数
因此，我的问题是，什么是最好的方式来模拟本地存储/会话存储在开玩笑。

describe('window.sessionStorage', () => {
    let mockSessionStorage;
    beforeEach(() => {
        mockSessionStorage = {};
        jest.spyOn(window.sessionStorage, "getItem").mockImplementation(key => {
            return mockSessionStorage[key];
        });
    });

    describe('getItem-', () => {
        beforeEach(() => {
            mockSessionStorage = {
                foo: 'bar',
            }
        });

        it('gets string item', () => {
            const ret = window.sessionStorage.getItem('foo');
            expect(ret).toBe('bar');
        });
    });
});

下面是我的jest配置

module.exports = {
    verbose: true,
    //setupFiles: ["jest-localstorage-mock"],
    testURL: "http://localhost/"
};

jestjs

来源：https://stackoverflow.com/questions/51566816/what-is-the-best-way-to-mock-window-sessionstorage-in-jest

4条答案

按热度按时间

dtcbnfnu1#

这里的解决方案只使用jestjs和typescript，仅此而已。
index.ts：

export function getUserInfo() {
  const userInfo = window.sessionStorage.getItem('userInfo');
  if (userInfo) {
    return JSON.parse(userInfo);
  }
  return {};
}

index.spec.ts：

import { getUserInfo } from './';

const localStorageMock = (() => {
  let store = {};

  return {
    getItem(key) {
      return store[key] || null;
    },
    setItem(key, value) {
      store[key] = value.toString();
    },
    removeItem(key) {
      delete store[key];
    },
    clear() {
      store = {};
    }
  };
})();

Object.defineProperty(window, 'sessionStorage', {
  value: localStorageMock
});

describe('getUserInfo', () => {
  beforeEach(() => {
    window.sessionStorage.clear();
    jest.restoreAllMocks();
  });
  it('should get user info from session storage', () => {
    const getItemSpy = jest.spyOn(window.sessionStorage, 'getItem');
    window.sessionStorage.setItem('userInfo', JSON.stringify({ userId: 1, userEmail: 'example@gmail.com' }));
    const actualValue = getUserInfo();
    expect(actualValue).toEqual({ userId: 1, userEmail: 'example@gmail.com' });
    expect(getItemSpy).toBeCalledWith('userInfo');
  });

  it('should get empty object if no user info in session storage', () => {
    const getItemSpy = jest.spyOn(window.sessionStorage, 'getItem');
    const actualValue = getUserInfo();
    expect(actualValue).toEqual({});
    expect(window.sessionStorage.getItem).toBeCalledWith('userInfo');
    expect(getItemSpy).toBeCalledWith('userInfo');
  });
});

100%覆盖报告的单元测试结果：

PASS  src/stackoverflow/51566816/index.spec.ts
  getUserInfo
    ✓ should get user info from session storage (6ms)
    ✓ should get empty object if no user info in session storage (1ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.548s, estimated 6s

以下是完整的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/51566816

赞(0）回复(0）举报 2023-02-14

hrirmatl2#

你可能根本不需要一个mock。只要像往常一样使用window.sessionStorage，并根据window.sessionStorage.getItem(...)的结果来编写条件，而不是监视window.sessionStorage.setItem。不要忘记像演示的那样在beforeEach中调用window.sessionStorage.clear()。
来自Eric Burel的评论

赞(0）回复(0）举报 2023-02-14

kuhbmx9i3#

这对我来说与添加对象一起工作：

defineProperty(window, 'sessionStorage', {
   writable: true,
   configurable: true,
   value: localStorageMock
}

赞(0）回复(0）举报 2023-02-14

t1qtbnec4#

在使用jest的上下文中，这对我很有效：

beforeAll(() =>
    sessionStorage.setItem(
        KeyStorage.KEY_NAME,
        JSON.stringify([Permission.VALUE_])
    )
);
afterAll(() => 
    sessionStorage.removeItem(KeyStorage.CONTEXT_TYPE_GLOBAL_PERMISSIONS)
);

赞(0）回复(0）举报 2023-02-14

我来回答

模拟窗口的最佳方法是什么,会话jest中的存储

4条答案

相关问题

热门标签

最新问答