몽쯔

단위 테스트를 해도 describe를 따로 줘도 render는 한페이지의 것을 전부 가져오는 것같다.

랜더를 쓴만큼 랜더링이되버림...

context api를 사용하면 provider는 외부에서 사용되기 때문에 에러를 난다.

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

아래의 코드처럼 render를 import해온 후 wrapper로 불러온 provider를 감싸주 면 된다.

import { render } from '@testing-library/react';
import { OrderContextProvider } from '../../../contexts/OrderContext';
...
render(<Component />, { wrapper: OrderContextProvider});

그러나 공통으로 사용하는 영역이 많을 경우 util로 작성하여 묶어서 사용하자

src/test-utils.js

import { render } from '@testing-library/react';
import { OrderContextProvider } from './contexts/OrderContext';

const customRender = (ui, options) =>
	render(ui, { wrapper: OrderContextProvider, ...options });

// @testing-library/react의 모든 것을 내보낸다
export * from '@testing-library/react';

// render는 customRender로 대체한다.
export { customRender as render };

~~~.test.js

// export를 해놨기 때문에 test-utils파일에서 import 해온다
import { render, screen } from '../../../test-utils';
...
render(<Component />);