IT이야기

제스트를 사용하여 Vuejs 어플리케이션에서 window.location.assign을 감시하는 방법

cyworld 2022. 7. 25. 22:35
반응형

제스트를 사용하여 Vuejs 어플리케이션에서 window.location.assign을 감시하는 방법

유닛 테스트를 위해 window.location.assign을 해야 합니다.하지만 테스트를 실행하면 이 오류가 발생합니다.

Cannot spy the assign property because it is not a function; undefined given instead

코드는 다음과 같습니다.

jest.spyOn(window.location, "assign");

이 건에 대한 힌트나 해결책을 주실 수 있는 분 계십니까?

Jese v25(JSDOM의 새로운 버전을 사용)로 인해 다음 오류가 발생합니다.

TypeError: Cannot assign to read only property 'assign' of object '[object Location]'

참고로 이것은 Jest/JSDOM 버그가 아닙니다.이것은 일반적인 브라우저 동작이며 JSDOM은 실제 브라우저처럼 동작하려고 합니다.

회피책은 로케이션개체를 삭제하고 독자적인 로케이션개체를 작성하는 것입니다.테스트 실행 후에는 원래 로케이션개체로 리셋해야 합니다.

describe('My awesome unit test', () => {
  // we need to save the original object for later to not affect tests from other files
  const realLocation = global.location

  beforeAll(() => {
    delete global.location
    global.location = { assign: jest.fn() }
    // or even like this if you are also using other location properties (or if TypeScript complains):
    // global.location = { ...realLocation, assign: jest.fn() }
  })

  afterAll(() => {
    global.location = realLocation
  })

  it('should call location.assign', () => {    
    // ...your test code

    expect(global.location.assign).toHaveBeenCalled()

    // or even better:
    // expect(global.location.assign).toHaveBeenCalledWith('/my_link')
  })
})

~하듯이window를 통해서만 액세스 할 수 있습니다.global농담 테스트의 키워드 및window.location.assignjsdom에서는 구현되지 않습니다.

jest
 .spyOn(global.location, "assign")
 .mockImplementation(url => console.log(url))

언급URL : https://stackoverflow.com/questions/54140514/how-to-spyon-window-location-assign-on-vuejs-application-with-jest

반응형