[코드숨] 리액트 13기 -5강/과제1:레스토랑 조회 구현하기 오류

오류

regions.jsx 에서 map을 돌렸지만 화면에 출력되지 않고 아래와 같이 에러가 뜸

Cannot read property 'map' of undefined

 

원인

React는 map(...)을 반복실행할 때, 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다.

 

해결

state의 기본 설정에서 오류가 났던 것이기 때문에, 다시 살펴보았더니 regions가 오타났던것.오타를 수정하니 해결되었다.

 

https://devbirdfeet.tistory.com/47

React 실행오류 Cannot read property 'map' of undefined

https://moonformeli.tistory.com/3

React.js - TypeError: map of Undefined 에러에 대한 정확한 이유와 설명

 

---

범위 오류)

에러1

  ● RestaurantsContainer › 레스토랑이 랜더링된다

    TypeError: Cannot read properties of undefined (reading 'length')

      1 | export default function Restaurants({ restaurants }) {
    > 2 |   if (!restaurants.length) {
        |                    ^
      3 |     return <p>레스토랑이 존재하지 않습니다.</p>;
      4 |   }

 

기존 RestaurantsContainer.test.jsx 에서 오류

원인: {getByTest}=render... 가 바깥에 있고 it () 안에 useSelector 가 있어 범위 오류가 남

import { useSelector } from 'react-redux';

import { render } from '@testing-library/react';

import RestaurantsContainer from './RestaurantsContainer';

jest.mock('react-redux');

describe('RestaurantsContainer', () => {
  const { getByText } = render((
    <RestaurantsContainer />
  ));

  it('레스토랑이 랜더링된다', () => {
    useSelector.mockImplementation((selector) => selector({
      restaurants: [
        { id: 1, name: '맛나' },
      ],
    }));

    expect(getByText(/맛나/)).not.toBeNull();
  });
});

 

해결 코드

import { useSelector } from 'react-redux';

import { render, screen } from '@testing-library/react';

import RestaurantsContainer from './RestaurantsContainer';

jest.mock('react-redux');

describe('RestaurantsContainer', () => {
  useSelector.mockImplementation((selector) => selector({
    restaurants: [
      { id: 1, name: '맛나' },
    ],
  }));

  function renderRestaurantsContainer() {
    return render((<RestaurantsContainer />));
  }

  it('레스토랑이 랜더링된다', () => {
    // const { getByText } = render((
    //   <RestaurantsContainer />
    // ));
    renderRestaurantsContainer();

    expect(screen.getByText(/맛나/)).not.toBeNull();
  });
});

---

에러2

TypeError:Cannot read properties of undefined (reading 'map')...  =>test코드에서 오류가 나서 에러가 남

원인: 위와 마찬 가지로 범위에 적용되는 것을 잘못 작성하여 일어난 오류

 

수정 전 RegionsContainer.test.jsx 

import { useDispatch, useSelector } from 'react-redux';

import { render, fireEvent } from '@testing-library/react';

import RegionsContainer from './RegionsContainer';

jest.mock('react-redux');

describe('RegionsContainer', () => {
  const { getByText } = render((
    <RegionsContainer />
  ));

  
  it('지역이 랜더링된다', () => {
    useSelector.mockImplementation((selector) => selector({
      regions: [
        { id: 1, name: '서울' },
      ],
    }));

    expect(getByText(/서울/)).not.toBeNull();
  });

  it('', () => {
    const dispatch = jest.fn();

    useDispatch.mockImplementation(() => dispatch);

    fireEvent.click(getByText(/서울/));

    expect(dispatch).toBeCalled();
  });
});

 

해결 

import { useDispatch, useSelector } from 'react-redux';

import { render, fireEvent, screen } from '@testing-library/react';

import RegionsContainer from './RegionsContainer';

jest.mock('react-redux');

describe('RegionsContainer', () => {
  const dispatch = jest.fn(); //다른 test에서도 쓰일 수 있으니 it외부에 작성

  useDispatch.mockImplementation(() => dispatch);

  useSelector.mockImplementation((selector) => selector({
    regions: [
      { id: 1, name: '서울' },
    ],
  }));

  function renderRegionsContainer() {
    return render((<RegionsContainer />));
  }

  it('지역이 랜더링된다', () => {
    renderRegionsContainer();

    expect(screen.getByText(/서울/)).not.toBeNull();
  });

  it('', () => {
    renderRegionsContainer(); //click전 render함수 적용

    fireEvent.click(screen.getByText(/서울/));

    expect(dispatch).toBeCalled();
  });
});

 

---

에러3

위와 마찬가지 범위 오류

 FAIL  src/CategoriesContainer.test.jsx (14.316 s)
  ● Console

    console.error
      Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'map')]

 

CategoriesContainer.test.jsx

수정전 

import { useSelector, useDispatch } from 'react-redux';

import { render, fireEvent } from '@testing-library/react';

import CategoriesContainer from './CategoriesContainer';

jest.mock('react-redux');

describe('CategoriesContainer', () => {
  const { getByText } = render((
    <CategoriesContainer />
  ));

  it('카테고리가 랜더링된다', () => {
    useSelector.mockImplementation((selector) => selector({
      categories: [
        { id: 1, name: '한식' },
      ],
    }));

    expect(getByText(/한식/)).not.toBeNull();
  });

  //
  it('카테고리 한식을 눌렀더니 한식이 선택이 됐다 ?', () => {
    const dispatch = jest.fn();

    useDispatch.mockImplementation(() => dispatch);

    fireEvent.click(getByText(/한식/));

    expect(dispatch).toBeCalled();
  });
});

 

해결

import { useSelector, useDispatch } from 'react-redux';

import { render, fireEvent, screen } from '@testing-library/react';

import CategoriesContainer from './CategoriesContainer';

jest.mock('react-redux');

describe('CategoriesContainer', () => {
  const dispatch = jest.fn();

  useDispatch.mockImplementation(() => dispatch);

  useSelector.mockImplementation((selector) => selector({
    categories: [
      { id: 1, name: '한식' },
    ],
  }));

  function renderCategoriesContainer() {
    return render((<CategoriesContainer />));
  }

  it('카테고리가 랜더링된다', () => {
    renderCategoriesContainer();

    expect(screen.getByText(/한식/)).not.toBeNull();
  });

  //
  it('카테고리 한식을 눌렀더니 한식이 선택이 됐다 ?', () => {
    renderCategoriesContainer();

    fireEvent.click(screen.getByText(/한식/));

    expect(dispatch).toBeCalled();
  });
});