Testing with svelte: svelte 모듈의 store함수 Mocking 하기

Dev-Yuns
2 min readJan 13, 2022

최근 svelte에서 테스트를 진행하면서 svelte 라이브러리의 store를 모킹하는데 꽤 고생을 했습니다. 테스트 하려는 페이지에서 Routify 라는 라이브러리의 $url 스토어 함수와 $goto 스토어 함수를 사용하고 있었습니다. 해당 함수들은 테스트할 대상이 아니므로 jest.fn() 을 통해서 바로 mocking을 시도해보았습니다.

jest.mock('@roxi/routify', () => {
return {
url: jest.fn(),
}
});

그러나 아래와 같은 에러 메시지가 나타났습니다. url이 스토어 이기 때문에 단순히 fn 을 사용해서 모킹이 되지 않았습니다.

'url' is not a store with a 'subscribe' method

그래서 storeimport 하여 url 에 넣어주니 또 다른 에러가 나옵니다.

The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: store_1

그렇다고 store 흉내를 내기 위해서 store 의 전체 메서드를 구현하기에는 불필요한 동작같다는 생각이 들어서 방법을 찾아보았더니 jest 에서 requireActual 이라는 메서드를 지원해주고 있었습니다. 이 메서드를 사용하면 jest 안으로 모듈을 모킹하지 않고 가져올 수 있습니다. 모듈 전체를 모킹하기 보다 일부 메서드를 덮어쓰고 싶을 때 유용해보였습니다.

routify 가 프로젝트 전체에서 사용되므로 jestSetup 파일에서 모킹해주었습니다. 직접 svelte/storereadable 메서드를 할당하면 에러가 나지만 이렇게 requireActual 메서드를 사용해서 jest 안으로 가져온 후에 할당해주면 에러 없이 테스트를 통과할 수 있습니다.

--

--