들어가며

현재 회사에서 나는 앵귤러와 ngrx, rxjs 스택을 사용하며 개발 중에 있었다.
그러던 중 component store에 대해서 테스트 코드를 작성해야 할 상황이 생겼다.

문제는 여기부터이다.
component store를 jest로 테스트하는 방법은 한글 자료는 물론 영어로 된 것조차 찾지 못했다( 사실 해결해 보고 나니 왜 없는지 알 것 같지만, 나 같은 능이버섯 개발자를 위해서 작성해 본다)

해결과정

일단 나는 ngrx, jest, angular 등 테스트 코드를 작성하는 방법을 구글에 다 적어봤지만
명확히 component store를 테스트하는 걸 적어 놓은 글을 보지 못했다, ngrx공식 문서에도 없다.
사실 지금 생각해 보면 이미 존재했다 내가 몰랐을 뿐..

먼저 component store 코드를 보자

일단 공식 문서에서 제공해 주는 코드를 한번 봐보자.
테스트 실행하는 코드는 제쳐 두고 설정하는 부분만 보면

import { TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';

describe('Auth Guard', () => {
  let store: MockStore;
  const initialState = { loggedIn: false };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        // any modules needed
      ],
      providers: [
        provideMockStore({ initialState }),
        // other providers
      ],
    });

    store = TestBed.inject(MockStore);
  });

  it('should return false if the user state is not logged in', () => {

  });

});

대충 이런 형식이다, 근데 공식 문서에는 mockstore 넣거나, selector를 넣니 마니 이런 말이 적혀있는데
component store 를 쓰는 나는 그런 걸 분리 안 하고 그냥 store코드 하나만 덩그러니 있다.

지금 보면 어떻게 할지가 떠오르지만 불과 이 문제를 겪었던 나는 출근한지 이제 1주일 겨우 지난 신입이고
앵귤러도 Rxjs도 ngrx도 다 처음인 뉴비 개발자였다. ( 지금도 같지만 )

어찌 됐든 내가 만든 component store 코드를 간략히 해보자면 이런 형태이다.

import { ComponentStore } from '@ngrx/component-store';

@Injectable()
export class TestStore extends ComponentStore<UserState> {

    constructor(private readonly TestApiService: TestApiService) {
    }
  .....
  
}

@Injectable() 이걸 보면 이건 서비스 같은 형태라고 볼 수 있겠다고 생각했다
그래서 앵귤러 공식 문서에서 서비스를 테스트하는 방법을 검색했고.

beforeEach(() => {
  TestBed.configureTestingModule({ providers: [ValueService] });
  service = TestBed.inject(ValueService);
});

해당 형태로 providers에 서비스를 넣고 inject를 하면 되는 문제였다. 유레카!

import { TestBed } from '@angular/core/testing';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { UserStore } from './user.store';

describe('Auth Guard', () => {
    let store: MockStore;
    let userStore: UserStore;

    beforeEach(() => {
        TestBed.configureTestingModule({ providers: [UserStore, provideMockStore({})] });
        userStore = TestBed.inject(UserStore);
    });

    it('should return false if the user state is not logged in', () => {
        console.log(userStore);
    });
});

이렇게 해주면 문제없이 잘 작동이 되었다.
provideMockStore({}) 원래는 이 코드를 안 넣었다가, 이걸 안 넣으면 내부에서 store를 찾을 수 없다고 널익셉션 에러가 뜨니 참고하자

provideMockStore 이게 필요한 이유는 store 코드는 테스트할 때 mock store를 써야 해서
provideMockStore로 mock store에 필요한 초기 상태 등을 주입시켜줘야 해서라고 알고 있다.
물론 나는 이미 있는 store를 가져와서 사용하지만 test라서 그런지 필요하더라

아무튼 이렇게 구성을 하면 이제 테스트를 실행할 수 있게 된다.