Test
react-redux mock example
react-redux 모듈을 모킹하기 위해 '/__mocks__' 디렉토리를 생성하고 'react-redux.js'를 생성한다. // path: /__mocks__/react-redux.js export const useDispatch = jest.fn(); export const useSelector = jest.fn((selector) => selector({})); 테스트의 대상이 되는 컴포넌트는 아래와 같다. import { useDispatch, useSelector } from 'react-redux'; import { updateCheckedItem } from '../actions'; export default function App() { const dispatch = useDispatc..
Jest fetch mock example
// api.test.js import { fetchWeather, fetchLocation, } from './api'; import WEATHER from '../../fixtures/weather'; import LOCATION from '../../fixtures/location'; describe('api', () => { const mockFetch = (data) => { global.fetch = jest.fn().mockResolvedValue({ async json() { return data; }, }); }; describe('fetchWeather', () => { beforeEach(() => { mockFetch(WEATHER); }); it('returns weather', ..
테스트 시나리오
describe - context - it 단일 테스트라면 test를 사용, 여러 개의 테스트라면 describe - it 구조를 사용한다. describe는 테스트의 대상, it은 테스트의 내용에 서술한다. 문맥에 따라 서술되는 내용이 달라진다면 context를 사용할 수 있다. 특히 그 문맥이 서로 상반되는 것이라면 context를 적극적으로 활용하여, decsribe - context - it 구조로 테스트 시나리오를 작성하는 것이 좋다. Depth depth가 너무 깊은 것은 리팩터링을 해야 하는 강력한 신호로 간주해야 한다. 테스트 코드는 컴포넌트의 설명서와 같다. 그렇다면 테스트의 전체적 구성은 앱을 설계하는 것에 직결된다. 단일 테스트가 하나의 책임을 갖도록 작성하고 테스트만 보고도 각각의 ..