섹션2 HA2 까다로웠던 부분

 

• fetch가 정상적으로 되나 ajaxcall이 1회 되야하나 3회되야한다고 나온다. expect(ajaxCallCount).toEqual(1); // ajax call이 1회 발생

 

fetch는 변수를 사용하지않고 함수를 가져와서 실행하게되면 3번이 일어나는 이유.

1. 테스트코드에서 한번 (Api.getMovies()부분)

 test('import한 mockMovie 대신, movieDataApi.js 앤드포인트로부터 영화 목록을 직접 응답받아 이용합니다.', async () => {
    const json = await Api.getMovies();
    expect(json).toEqual(result);
    const ajaxCallCount = scope.interceptors[0].interceptionCounter;
    expect(ajaxCallCount).toEqual(1); // ajax call이 1회 발생
    expect(scope.interceptors[0].statusCode).toEqual(200);
  });
});

 

 2. 테스트코드에서 APP이 렌더링되면서 한번더 

test('현재 선택한 영화와 영화 목록을 React state로 다뤄야 합니다.', (done) => {
    const useStateSpy = jest.spyOn(React, 'useState');
    render(<App />);

    expect(useStateSpy).toBeCalled();
    expect(useStateSpy.mock.calls.length).toBeGreaterThanOrEqual(2);
    useStateSpy.mockRestore();
    done();
  });

3. useEffect에서 처음 렌더링시 한번

 

useEffect(() => {
   getMovies()
    .then((data) => {
      setMovies(data);
    });
  }, []); //초기화가 한번,초기화가 되서 2번.(테스트코드진행중에?) fetch자체가 3번된거.

 

 

이문제를 해결하기위해서 export위에 변수를 사용하면 이미 fetch된것을 가져와서 2번,3번 부분이 렌더링될때 0번이되버린다.

1번부분서 한번 진행되서 ajax 1회 발생이 충족

!! 변수를 내부에서 선언하면 안된다.

import mockMovie from './static/mockMovie';
const movieData = getMovies();

export const App = () => {

  const [currentMovie,setCurrentMovie] = useState(mockMovie[0])
  const [movies,setMovies] = useState(mockMovie)

  
  useEffect(() => {
   movieData
    .then((data) => {
      setMovies(data);
    });
  }, []); //초기화가 한번,초기화가 되서 2번.(테스트코드진행중에?) fetch자체가 3번된거.

 

• 영화 정보를 props로 전달하지 않으면, "영화를 선택하세요"라는 메시지를 표시해야 합니다.

얘는 어쩌라는건가...처음에는 === false, undefined이래저래 시도해봤는데 테스트케이스를 보니 null이 있길래 넣어보니 작동..ㅎㅎ

 

if(movie === null){
    return `영화를 선택하세요`
  }

 

문제가 어렵다기보단..까다로왔던 점이 많았고. 테스트코드를 보면서 이미 짜여진 변수명을 사용해야했었다.

사실 ajax call1회 저 문제는 작성자의 의도를 모르겠다. 무엇을 테스트하기위함이였는지..ㅠㅠ..? 일부로 꼬아서 만든거같기도하고..

잘못짜여진 코드가 아닐까 생각한다.