전체 글 52

[React + Jest] 두 번째 테스트 케이스부터 컴포넌트를 찾을 수 없는 문제(자동 cleanup)

문제 상황 분명히 컴포넌트를 렌더링하고 테스트했음에도 두 번째 테스트부터는 렌더링된 컴포넌트에 접근할 수 없었습니다. // ... import문 render( ); test('1번 테스트', () => {}); test('2번 테스트', () => {}); 렌더링된 내용이 두 번째 테스트까지 유지되지 않는다고 생각하고 다음의 내용을 시도하였습니다. 시도 1 beforeAll을 사용해서 렌더링했으나 효과가 없습니다. 그 이유는 beforeAll은 첫 테스트 이전에 한 번만 실행되기 때문입니다. describe('Todos 컴포넌트 관련 테스트', () => { beforeAll(() => { render( ); }); // ... test }); 시도 2 beforeAll이 아닌 beforeEach를 사용..

[React] Warning: validateDomNesting(...)

오류 실전을 멀리 했던 초보 개발자는 Create React App으로 프로젝트를 구성하였다가 위와 같은 실수를 저지르고 맙니다. React App은 이미 HTML body 안에 렌더링되고 있는 것이기 때문에 React 컴포넌트 안에 직접 body 태그를 작성하는 경우, body를 중복해서 사용하는 것이 됩니다. 해결 React 컴포넌트 안에서 사용한 body 태그를 제거하였습니다. 덧 오류 자체는 HTML 요소 간의 부모-자식 관계를 부적절하게 설정하였을 때 발생합니다. 태그 안에 태그가 들어가는 경우 - https://anerim.tistory.com/211 태그 안에 다시 태그가 들어가는 경우 - https://stackoverflow.com/questions/47282998/validatedomn..