Redux test를 위한 export, default export 구분

JS Module Export

named export

export const App = () => {
	...
}

//import { App } from './App'

 

default export

const App = () => {
	...
};

export default App;

// import App from './App'

 

둘 중 하나만 사용하는 것이 일반적이지만, 두 개 다 사용가능하다.

특히 Redux 테스트를 한다면 두 개 전부 사용하는 것이 유용하다.

둘 중 하나만 사용한다면 번거로운 점이 많아진다.

 

export const App = (props) => {
	...
};

default export App;

---

Redux 테스트 에러

react redux test 중 나타난 에러

 

 

Provider에 store를 생성해서 props로 줬는데 왜?

const setup = (state = defaultState) => {
	const store = createStore(authReducer, state);
	return render(
		<Provider store={store}>
			<MemoryRouter>
				<TopBar />
			</MemoryRouter>
		</Provider>
	);
};

 

내가 작성하던 테스트는 단위테스트기 때문에 App root에 정의한 store를 찾지 못한다.

테스트환경과 실제 리액트가 가동되는 환경은 구분해서 생각해야 한다.

그래서 Redux 테스트 하려면 위와 같이 테스트 파일에 setup 함수로 store를 정의해서 사용하는 게 일반적이다.

 

 

	describe("Interactions", () => {
		it("Logout 링크 클릭시 login, singup 링크 렌더링", () => {
			const { queryByText } = setup(loggedInState);
			const logoutLink = queryByText("Logout");
			fireEvent.click(logoutLink);

			const loginLink = queryByText("Login");
			expect(loginLink).toBeInTheDocument();
		});
	});

 

문제는 Redux 테스트하기 전에 작성했던 테스트 파일에도 다시 저렇게 Provider를 추가하는게 너무 번거롭다.

 

describe("Layout", () => {
		it("로그인 헤더 렌더링", () => {
			const { container } = render(<LoginPage />);
			const header = container.querySelector("h1");
			expect(header).toHaveTextContent("Login");
		});

 

이런 테스트 전부에 render를 재정의하기엔 너무 귀찮다. 무슨 방법이 없을까? 

---

테스트용 Component 분리

Component에서 Redux state에 접근하기 위해서는 connect 함수로 연결이 필요하다.

그런데 connect 함수로 연결하면 단위테스트에서 store를 찾지 못해 오류가 뜬다.

Redux state를 신경쓰지 않고 테스트하고 싶으면 어떻게 해야할까?

 

테스트용 Component와 실제 쓰일 Redux에 쓰일 Component를 export로 분리하면 된다.

export const App = (props) => {		// 테스트
	...
};

export defualt connect()(App);		// App

 

위와 같이 App에서 쓰일 Component는 connect함수로 연결해 export하고, 테스트에서 쓰일 Component는 그대로 export하면 된다. 물론 import 할 때는 목적에 맞게 import하면 된다.

 

//	For Test
import { LoginPage } from "./LoginPage";

 

//	For App
import LoginPage from "../pages/LoginPage";

 

테스트 성공