[Wecode 53일차]Jest와 Enzyme, 선택자 선택

1. jest는 페이스북에서 만든 프레임워크이다.  

 

사용할 수 있는 프로젝트는 바벨, 타입스크립트, 노드, 리액트, 앵귤러, 뷰에서 사용가능하다.

 

테스트환경에 대한  Test Runner와 Assertion library를 제공해 준다.

 

describe와 it으로 테스트 코드를 작성한다.

 

테스트할때 __test__ 폴더를 src 폴더 밑에 작성하고 000.test.js 로 파일을 작성하면 된다.

 

테스트를 생성하려면 it()을 추가하면 되고, 첫번째 인자값에 테스트 이름을 넣고, 두번째 인자인 콜백에는 테스트할 코드를 작성한다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

describe()는 it을 감싸서 비슷한 유닛 테스트끼리 그룹화하여 테스트 이름을 지정할 수 있다. 

 

assertion은 내가 작성한 로직을 검증하기 위한 검증구문이라고 생각하면 되고, 라이브러리에서 expect()같은 여러 검증 메서드를

제공하고 있다.

 

2. Enzyme은 리액트 컴포넌트를 테스트하기 쉽도록 해준 airbnb에서 만든 라이브러리이다.

     별도로 추가해서 사용하면 된다.

     3가지 중요한 랜더링 방식이 있다.

describe('<Proflie />', () => {
    it('matches snapshot', ()=> {
        const wrapper = mount(<Profile username="velopert" name ="김민준"/>);
        expect(wrapper).toMatchSnapshot();
    });
    it('renders username and name', () => {
        const wrapper = mount(<Profile username="velopert" name="김민준"/>);
        expect(wrapper.props().username).toBe('velopert');
        expect(wrapper.props().name).toBe('김민준');
    })
})

   두번째 구문을 보면   mount를 보자

 const wrapper = mount(<Profile username="velopert" name="김민준"/>);

1)  mount render방식

     (1) 리액트 라이프싸이클, 자식컴포넌트, 프롭스 모든 걸 통합한 테스트방식     

 

2) shallow render방식

     (1) 원하는 컴포넌트만 테스트.

     (2) 라이프 싸이클 사용함.

 

3) static render방식

     (1) 라이프사이클 메서드에 접근안하며, children을 포함한 정적인 HTML 테스트

     (2) mount 방식보다 비용이 적게 드는대신 기능이 적음.

 

3. 이미지 

배경이미지를 넣으려면, 넣고자하는 이미지의 2배 크기를 넣어야 줄였을때 깨지지 않는다. 그리고, 버튼에 배경이미지 등

텍스트값이 없는 상태에서 이미지를 넣고 제대로된 화면이 나오게하려면, 크기를 그림 크기에 맞게 맞춰줘야한다.

  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;

이정도면 백그라운드 이미지는 맞출수 있고, background-size : cover까지 할필요는 없는 듯 싶다.

밥꿍 식당 리스트 이미지 넣을때는 이미지 위에 부모태그 놓고, 백그라운드 이미지를 넣었다.

버튼에 아이콘 이미지 넣는 정도는 위정도에서 끝낼 수 있을 듯 싶다.

 

테스트 프레임워크 한번 천천히 사용해봐야겠다.

 

4. 마지막태그 만 제외하고. 선택하기

<span className="admin_user_info">지점명</span>
<span className="admin_user_info">선릉역</span>
<span className="admin_user_info">직책명</span>
<span className="admin_user_info">매니져</span>
<span className="admin_user_info">관리자명</span>
<span className="admin_user_info ">아이유</span>

마지막 아이유만 제외하고 나머지는 가리려고 한다.

.wrap_admin_user_info > span:not(:last-child) {
  display: none;
 }