<div id="readability-page-1" class="page"><div>Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다. 
<a href="https://github.com/ginameee/fe-test-env/tree/main/src/components/organisms/todos/TodoInput">예제코드</a>를 보면 쉽게 따라할 수 있다.
form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로 감지못하는 이슈가있었다. 3시간 가까이 해맸던 것 같다.
원인은 크게 2가지였다.
<h2 id="유효성검사를-통과하지-못함">유효성검사를 통과하지 못함</h2>
react-form-hook의 경우 validation이 통과해야 최종적으로 submit이 호출이됐다. 
나는 <code>require: true</code> 로 해놓고 빈값으로 놔둔채 주구장창 submit을 하고있었다.
 TodoInput.tsx 
<pre><code>//...

type TProps = {
 onSubmit?: any;
};
const TodoInput: React.FC&lt;TProps&gt; = ({ onSubmit = () =&gt; {} }) =&gt; {
//...

 const addTodo = useCallback((data) =&gt; {
 const { title, content } = data;

 dispatch(
 actions.todos.add({
 title,
 content,
 })
 );

 onSubmit();
 reset();
 }, []);

 return (
 &lt;div&gt;
 &lt;div&gt;
 &lt;form onSubmit={handleSubmit(addTodo)} data-testid="todo-form"&gt;
 &lt;input
 type="text"
 {...register("title", { required: true })}
 placeholder="제목"
 data-testid="todo-title-input"
 /&gt;
 &lt;input
 type="textarea"
 {...register("content", { required: true })}
 placeholder="내용"
 data-testid="todo-content-input"
 /&gt;
 &lt;button type="submit" data-testid="todo-submit-btn"&gt;
 추가
 &lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default React.memo(TodoInput);
</code></pre>
 TodoInput.test.tsx 
<pre><code>// ...

const createStore = configureStore&lt;TRootState&gt;([]);
let rootStore!: MockStoreEnhanced&lt;TRootState&gt;;
let todosState!: TState;

describe("organisms/TodoInput", () =&gt; {
 beforeEach(async () =&gt; {
 rootStore = createStore({
 todos: getInitialState(),
 });
 todosState = rootStore.getState().todos;
 rootStore.dispatch = jest.fn();

 await act(async () =&gt; {
 render(
 &lt;Provider store={rootStore}&gt;
 &lt;TodoInput /&gt;
 &lt;/Provider&gt;
 );
 });
 });

 test("추가버튼 클릭시 add 이벤트를 dispatch 합니다.", async () =&gt; {
 
 /*
 ==========================================
 		값을 넣어줘야 합니다.
 */
 const todoExample = {
 title: 'test title',
 vlaue: 'test value'
 },
 const submitEl = screen.getByTestId("todo-submit-btn");
 fireEvent.input(screen.getByTestId("todo-title-input"), {
 target: {
 value: todoExample.title,
 },
 });

 fireEvent.input(screen.getByTestId("todo-content-input"), {
 target: {
 value: todoExample.value,
 },
 });
 /*
 ==========================================
 */

 fireEvent.submit(submitEl);

 await waitFor(() =&gt; {
 expect(rootStore.dispatch).toBeCalledWith(
 actions.todos.add({
 title: todoExample.title,
 content: todoExample.value,
 })
 );
 });
 });
});
</code></pre>
<h2 id="비동기-처리">비동기 처리</h2>
react-form-hook의 submit 처리는 비동기로 이루어진다. 
submit이 일어나고 나서 그 결과가 ui에 반영될 때 까지 기다려주어야 한다는 뜻이다.
<a href="https://react-hook-form.com/kr/advanced-usage/#TestingForm">react-form-hook 테스팅가이드</a>에도 아래와같은 문구가 있다.
<blockquote>
waitFor 및 find* 메소드를 사용하여 폼이 제출되는 것을 감지합니다. 
handleSubmit 메서드는 비동기적으로 실행되기 때문입니다.
</blockquote>
<code>waitfor</code> 를 이용해 submit의 결과가 ui에 반영될때까지 기다려주자
<pre><code>//...

test("추가버튼 클릭시 add 이벤트를 dispatch 합니다.", async () =&gt; {
	//...

 fireEvent.submit(submitEl);

 await waitFor(() =&gt; {
 expect(rootStore.dispatch).toBeCalledWith(
 actions.todos.add({
 title: "test title",
 content: "test content",
 })
 );
 });
 });</code></pre></div></div>

ginameee.log

Jangchun Lee

Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다.
예제코드를 보면 쉽게 따라할 수 있다.
form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로 감지못하는 이슈가있었다. 3시간 가까이 해맸던 것 같다.
원인은 크게 2가지였다.
유효성검사를 통과하지 못함
react-form-hook의 경우 validation이 통과해야 최종적으로 submit이 호출이됐다.
나는 require: true 로 해놓고 빈값으로 놔둔채 주구장창 submit을 하고있었다.
* TodoInput.tsx *
//...
type TProps = {
 onSubmit?: any;
};
const TodoInput: React.FC<TProps> = ({ onSubmit = () => {} }) => {
//...
 const addTodo = useCallback((data) => {
 const { title, content } = data;
 dispatch(
 actions.todos.add({
 title,
 content,
 })
 );
 onSubmit();
 reset();
 }, []);
 return (
 <div>
 <div>
 <form onSubmit={handleSubmit(addTodo)} data-testid="todo-form">
 <input
 type="text"
 {...register("title", { required: true })}
 placeholder="제목"
 data-testid="todo-title-input"
 />
 <input
 type="textarea"
 {...register("content", { required: true })}
 placeholder="내용"
 data-testid="todo-content-input"
 />
 <button type="submit" data-testid="todo-submit-btn">
 추가
 </button>
 </form>
 </div>
 </div>
 );
};
export default React.memo(TodoInput);
* TodoInput.test.tsx *
// ...
const createStore = configureStore<TRootState>([]);
let rootStore!: MockStoreEnhanced<TRootState>;
let todosState!: TState;
describe("organisms/TodoInput", () => {
 beforeEach(async () => {
 rootStore = createStore({
 todos: getInitialState(),
 });
 todosState = rootStore.getState().todos;
 rootStore.dispatch = jest.fn();
 await act(async () => {
 render(
 <Provider store={rootStore}>
 <TodoInput />
 </Provider>
 );
 });
 });
 test("추가버튼 클릭시 add 이벤트를 dispatch 합니다.", async () => {
 /*
 ==========================================
 값을 넣어줘야 합니다.
 */
 const todoExample = {
 title: 'test title',
 vlaue: 'test value'
 },
 const submitEl = screen.getByTestId("todo-submit-btn");
 fireEvent.input(screen.getByTestId("todo-title-input"), {
 target: {
 value: todoExample.title,
 },
 });
 fireEvent.input(screen.getByTestId("todo-content-input"), {
 target: {
 value: todoExample.value,
 },
 });
 /*
 ==========================================
 */
 fireEvent.submit(submitEl);
 await waitFor(() => {
 expect(rootStore.dispatch).toBeCalledWith(
 actions.todos.add({
 title: todoExample.title,
 content: todoExample.value,
 })
 );
 });
 });
});
비동기 처리
react-form-hook의 submit 처리는 비동기로 이루어진다.
submit이 일어나고 나서 그 결과가 ui에 반영될 때 까지 기다려주어야 한다는 뜻이다.
react-form-hook 테스팅가이드에도 아래와같은 문구가 있다.
waitFor 및 find* 메소드를 사용하여 폼이 제출되는 것을 감지합니다. 
handleSubmit 메서드는 비동기적으로 실행되기 때문입니다.
waitfor 를 이용해 submit의 결과가 ui에 반영될때까지 기다려주자
//...
test("추가버튼 클릭시 add 이벤트를 dispatch 합니다.", async () => {
 //...
 fireEvent.submit(submitEl);
 await waitFor(() => {
 expect(rootStore.dispatch).toBeCalledWith(
 actions.todos.add({
 title: "test title",
 content: "test content",
 })
 );
 });
 });

ReactHookForm Submit 테스트 이슈

댓글