玩笑测试，sessionStorage 未定义

Question

我正在尝试运行我的第一个 Jest 测试，但出现此错误

 FAIL  src\containers\__test__\AppContainer.spec.js
  ● Test suite failed to run

    ReferenceError: sessionStorage is not defined

我不确定我是否应该得到这个错误，因为我没有测试 sessionStorage，只是想测试根容器。

--更新--

import React from 'react'
import { shallow } from 'enzyme'
import AppContainer from '../AppContainer'

//Tried here also
global.sessionStorage = {
  data: {},
  setItem: (key, value) => {
    this.data[key] = value
  },
  getItem: (key) => this.data[key]
}
describe('AppContainer', () => {
  beforeEach(function () {
    global.sessionStorage = {
      data: {},
      setItem: (key, value) => {
        this.data[key] = value
      },
      getItem: (key) => this.data[key]
    }
  })

  it('should render self and subcomponents', () => {
    const enzymeWrapper = shallow(<AppContainer />)

    expect(enzymeWrapper.find('div').hasClass('grommetux-app')).toBe(true)
  })
})

--

ReferenceError: sessionStorage is not defined
  at Function.r.get (node_modules\oidc-client\lib\oidc-client.min.js:1:13009)
  at new e (node_modules\oidc-client\lib\oidc-client.min.js:74:15382)
  at new e (node_modules\oidc-client\lib\oidc-client.min.js:74:5255)
  at n (node_modules\redux-oidc\dist\redux-oidc.js:1:1853)
  **at Object.<anonymous> (src\utils\userManager.js:23:127)**
  at Object.<anonymous> (src\containers\AppContainer.js:9:46)
  at Object.<anonymous> (src\containers\__test__\AppContainer.spec.js:3:47)
  at process._tickCallback (internal\process\next_tick.js:103:7)

我是 "using" sessionStorage 通过图书馆，oidc-clientjs，所以我真的无法控制它。

错误来源的第23行是

import { createUserManager } from 'redux-oidc'
....
const userManager = createUserManager(config) (L23)

Answer 1

最简单的方法是模拟redux-oidc。有两种方法可以做到这一点。

您需要 createUserManager 在某些测试中表现不同：

//you need to import the module as you need to set the behaviour of 
//createUserManager in every tests
import { createUserManager } from 'redux-oidc' 

//mock the module with an object that just holds createUserManager       
//method as a simple spy, later in your tests you can define what this 
//spy should do
jest.mock('redux-oidc', () => ({createUserManager: jest.fn()}))

it('should render self and subcomponents', () => {
    createUserManager.mockImplementation(() => 'test1234`)//set the mock implementation here
    const enzymeWrapper = shallow(<AppContainer />)
    expect(enzymeWrapper.find('div').hasClass('grommetux-app')).toBe(true)
})

createUserManager 在某些测试中做同样的事情：

//mock the module with an object that just holds createUserManager
//method as a simple function that always returns 'test1234'
jest.mock('redux-oidc', () => ({createUserManager: () => 'test1234'}))

it('should render self and subcomponents', () => {
    const enzymeWrapper = shallow(<AppContainer />)
    expect(enzymeWrapper.find('div').hasClass('grommetux-app')).toBe(true)
})

Answer 2

我正在使用 Create-react-app，所以我将其添加到 src/setupTests.js

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

玩笑测试，sessionStorage 未定义

Jest testing, sessionStorage undefined

reactjs

jestjs