Redux: 스마트 구성 요소 단위 테스트

에 만든 2015년 08월 20일 · 19코멘트 · 출처: reduxjs/redux

나는 문서의 단위 테스트 섹션을 읽고 있었고 바보 컴포넌트를 테스트하는 방법에 대한 예제가 있지만 "스마트 컴포넌트"(connect () 메소드를 사용하는 컴포넌트)를 단위 테스트 할 수있는 것은 다루지 않습니다. 스마트 구성 요소의 단위 테스트는 connect ()가 만드는 래퍼 구성 요소로 인해 조금 더 복잡하다는 것이 밝혀졌습니다. 문제의 일부는 connect ()를 통해 구성 요소를 래핑하려면 'store'prop (또는 컨텍스트)가 있어야한다는 것입니다.

나는 이것을하려고 노력했고 그것을 달성하는 더 좋은 방법이 있는지에 대한 약간의 피드백을 받기를 바랐다. 그리고 내가 한 일이 합리적으로 보이면 PR을 밀어서 이에 대한 정보를 단위 테스트 문서에 추가 할 것이라고 생각했습니다.

시작하려면 문서의 단위 테스트 섹션에있는 기존 예제 구성 요소를 가져 와서 connect ()로 래핑하여 상태 및 디스패치 바인딩 된 작업 생성자로부터 데이터를 전달했습니다.

Header.js (스마트 구성 요소)

import React, { PropTypes, Component } from 'react';
import TodoTextInput from './TodoTextInput';
import TodoActions from '../actions/TodoActions';
import connect from 'redux-react';

class Header extends Component {
  handleSave(text) {
    if (text.length !== 0) {
      this.props.addTodo(text);
    }
  }

  render() {
    return (
      <header className='header'>
          <h1>{this.props.numberOfTodos + " Todos"}</h1>
          <TodoTextInput newTodo={true}
                         onSave={this.handleSave.bind(this)}
                         placeholder='What needs to be done?' />
      </header>
    );
  }
}

export default connect(
  (state) =>  {numberOfTodos: state.todos.length},
  TodoActions
)(Header);

단위 테스트 파일에서도 예제와 비슷합니다.

Header.test.js

import expect from 'expect';
import jsdomReact from '../jsdomReact';
import React from 'react/addons';
import Header from '../../components/Header';
import TodoTextInput from '../../components/TodoTextInput';
const { TestUtils } = React.addons;

/**
 * Mock out the top level Redux store with all the required 
 * methods and have it return the provided state by default.
 * <strong i="13">@param</strong> {Object} state State to populate in store
 * <strong i="14">@return</strong> {Object} Mock store
 */
function createMockStore(state) {
  return {
    subscribe: () => {},
    dispatch: () => {},
    getState: () => {
      return {...state};
    }
  };
}

/**
 * Render the Header component with a mock store populated
 * with the provided state
 * <strong i="15">@param</strong> {Object} storeState State to populate in mock store
 * <strong i="16">@return</strong> {Object} Rendered output from component
 */
function setup(storeState) {
  let renderer = TestUtils.createRenderer();
  renderer.render(<Header store={createMockStore(storeState)} />);
  var output = renderer.getRenderedOutput();
  return output.refs.wrappedInstance();
}

describe('components', () => {
  jsdomReact();

  describe('Header', () => {
    it('should call call addTodo if length of text is greater than 0', () => {
      const output = setup({
        todos: [1, 2, 3]
      });
      var addTodoSpy = expect.spyOn(output.props, 'addTodo');

      let input = output.props.children[1];
      input.props.onSave('');
      expect(addTodoSpy.calls.length).toBe(0);
      input.props.onSave('Use Redux');
      expect(addTodoSpy.calls.length).toBe(1);
    });
  });
});

관련 부분 만 표시하기 위해이 테스트를 약간 단순화했지만 확실하지 않은 요점은 createMockStore 메서드입니다. 헤더 컴포넌트를 소품없이 렌더링하려고하면 Redux (또는 react-redux)에서 해당 컴포넌트에 store prop 또는 컨텍스트가 있어야한다는 오류가 발생합니다. <Provider> 구성 요소. 단위 테스트에 사용하고 싶지 않기 때문에 모의 방법을 만들고 테스트가 스토어에서 설정하려는 상태로 통과하도록 허용했습니다.

이 접근 방식에서 볼 수있는 이점은 구성 요소 내에서 함수를 테스트 할 수있을뿐만 아니라 connect ()로 전달하는 메서드의 기능도 테스트 할 수 있다는 것입니다. expect(output.props.numberOfTodos).toBe(3) mapStateToProps 함수가 내가 예상 한대로 작동하는지 확인하는 expect(output.props.numberOfTodos).toBe(3) 와 같은 다른 주장을 여기에 쉽게 작성할 수 있습니다.

그것의 주된 단점은 내가 Redux 스토어를 조롱해야한다는 것인데, 그렇게 복잡하지는 않지만 내부 Redux 로직의 일부인 것처럼 느껴지고 변경 될 수 있습니다. 분명히 내 단위 테스트를 위해 이러한 메서드를 일반 단위 테스트 유틸리티 파일로 옮겼으므로 저장소 메서드가 변경되면 코드를 한곳에서 수정하면됩니다.

생각? 다른 사람이 스마트 구성 요소를 단위 테스트하여 더 나은 방법을 찾았습니까?

discussion question

출처

ernieturner

👍1

가장 유용한 댓글

@ernieturner @ghengeveld가 의미하는 바는 어디에서나 ES6 모듈을 사용하는 경우 데코 레이팅 된 Header 구성 요소를 기본값으로 내보낼 수 있으며 일반 React 구성 요소는 추가 이름 내보내기가 될 수 있다는 것입니다. 예를 들면-

//header.js
export class HeaderDumbComponent {
  render() {
    return <header><div>...</div></header>;
  }
}

export default connect(
  (state) =>  {numberOfTodos: state.todos.length},
  TodoActions
)(HeaderDumbComponent);

이 이중 내보내기를 사용하면 메인 앱에서 import Header from './header.js' 로 이전과 같이 스마트 구성 요소를 사용할 수 있으며 테스트는 import {HeaderDumbComponent} from '../components/header.js' 직접 redux를 우회하고 핵심 구성 요소의 동작을 테스트 할 수 있습니다.

eugene1g 에 2015년 08월 21일

👍18

모든 19 댓글

대안은 (장식되지 않은) Header 클래스를 내보내는 것이므로 별도로 가져 와서 테스트 할 수 있습니다.

또한 최소한 Mocha를 사용하는 경우 모든 파일에서 jsdomReact 호출이 필요하지 않습니다. 내 setup.js는 다음과 같습니다.

import jsdom from 'jsdom';
import ExecutionEnvironment from 'react/lib/ExecutionEnvironment';

if (!global.document || !global.window) {
  global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
  global.window = document.defaultView;
  global.navigator = window.navigator;

  ExecutionEnvironment.canUseDOM = true;

  window.addEventListener('load', () => {
    console.log('JSDom setup completed: document, window and navigator are now on global scope.');
  });
}

--require 명령 줄 옵션을 통해로드됩니다 : mocha -r babelhook -r test/setup --recursive (babelhook은 require('babel-core/register') 대한 호출입니다).

ghengeveld 에 2015년 08월 20일

예, Header 클래스와 데코 레이팅 된 클래스를 모두 내보낼 수 있지만 단위 테스트를 위해 소스 코드를 변경하지 않아도되기를 바랐습니다. 그렇게하면 데코 레이팅 된 구성 요소가 포함 된 모든 위치를 변경해야합니다 (예 : import Header from . / components / Header` 대신 import {DecoratedHeader} from './components/Header' ).

jsdom 설정에 관해서는 사용 사례를 보여주는 방법으로 문서의 예제를 순전히 복사하고 있었으며, 기본 설정으로 사용하지 않고 단지 예일뿐입니다.

ernieturner 에 2015년 08월 20일

위의 코드 샘플이 불완전하다는 것을 알았습니다. 스마트 구성 요소를 직접 테스트하려면 렌더링 결과 대신 refs.wrappedInstance 를 반환하는 유틸리티 메서드가 있어야 연결 장식 구성 요소 (위의 설정 함수에서 업데이트 됨)가 제공됩니다. . 이것은 다시 약간의 단위 테스트가 Redux 내부 (이 경우, 특히 react-redux 내부)에 의존하게 만듭니다. 그래서 작동하지만 약간 허약하다고 느낍니다.

ernieturner 에 2015년 08월 21일

@ernieturner 또한이를 위해 getWrappedInstance() 공용 API를 제공하므로 refs 직접 액세스하는 것이 걱정되는 경우 신뢰할 수 있습니다. 그리고 이것을 투명하게 만드는 react-test-tree 와 같은 유틸리티도 있습니다.

gaearon 에 2015년 08월 21일

//header.js
export class HeaderDumbComponent {
  render() {
    return <header><div>...</div></header>;
  }
}

export default connect(
  (state) =>  {numberOfTodos: state.todos.length},
  TodoActions
)(HeaderDumbComponent);

eugene1g 에 2015년 08월 21일

👍18

@ eugene1g @ghengeveld 이것은 실제로 문제에 대한 정말 좋은 해결책입니다. 그것을 설명하는 "Writing tests"문서에 PR을 보내십시오!

gaearon 에 2015년 08월 21일

@ eugene1g 그게 바로 제가 의미하는
@gaearon 내가 할게.

ghengeveld 에 2015년 08월 21일

@ghengeveld 오해에 대해 사과드립니다. 나는 여전히 CommonJS 스타일 가져 오기를 사용하고 있으므로 여전히 ES6 모듈에서 꽤 녹슬 었습니다. 문서에 공개하기에 좋은 솔루션 인 것 같습니다. 또한 mapStateToProps / mapDispatchToProps 메서드를 노출하여 상점을 조롱하지 않고도 테스트 할 수 있도록 할 수 있다고 가정합니다.

export class HeaderDumpComponent ...

export function mapStateToProps(state) ... 
export function mapDispatchToProps(dispatch) ...

export default connect(mapStateToProps, mapDispatchToProps)(HeaderDumpComponent);

대부분의 맵 방법은 단위 테스트가 필요하지 않을 정도로 간단 할 수 있지만, 일부는 내 구성 요소의 기능에서 매우 중요한 부분이므로 확인할 가치가 있습니다.

모든 사람에게 제안 해 주셔서 감사합니다. 문서에 대한 도움이 필요하면 알려주십시오.

ernieturner 에 2015년 08월 21일

지금 당장 위에 설명 된대로 권장되는 접근 방식을 시도하고 있지만 완전히 편안하지 않습니다. 이렇게하면 connect 전달 된 매개 변수가 통합 테스트 외부에서 테스트되지 않은 상태로 남습니다. 나는 모의 상점이 잠재적으로 부서 질 수 있다는 것을 이해하지만, 이것이 컴포넌트 테스트를 지원할 수 있다면 redux-mock-store 와 같은 것이 뛰어들 수있는 곳이라고 생각합니다. 그 방향에 대해 어떻게 생각하십니까?

carpeliam 에 2015년 11월 03일

뿡뿡

일반 상점을 사용하고 특정 초기 상태로 수분을 공급하지 않는 이유는 무엇입니까?
어떤 작업이 전달되는지 테스트하려는 경우에만 스토어를 모의하면됩니다.

gaearon 에 2015년 11월 03일

뿡뿡

이 저장소에서 counter 및 todomvc 예제에 대한 단위 테스트를 참조하세요.

gaearon 에 2015년 11월 03일

다른 구성 요소 내부에서 스마트 구성 요소를 렌더링하고 얕은 렌더러를 사용할 수없는 문제가있었습니다 (구성 요소는 componentDid * 메서드를 사용함). 우리가 한 것은 간단한 React 컴포넌트를 반환하는 함수를 반환하기 위해 connect 함수를 스텁 (sinon 사용)하는 것입니다.

부서지기 쉬우 며 React 0.14로 마이그레이션 할 수있게되면 얕은 렌더러로 이동하려고하지만이 방법은 당분간 테스트에서 차단을 해제했습니다.

songawee 에 2015년 11월 24일

이것에도 문제가 있습니다. 나는 React와 Redux 모두에 다소 익숙하지 않으므로 이것이 나를 방해하는 것 같습니다. 어떻게 돌아 다닐 수 있었습니까? 뿡뿡

adrianObel 에 2015년 12월 02일

제안 된 이중 내보내기 방법은 select (mapStoreToState) 함수를 테스트하지 않은 상태로 둡니다. 독립적으로 테스트하려면 내보내기도해야하지만 테스트 이름은 또 변경해야합니다.

나는 shallowRenderer가 연결의 래핑 된 구성 요소와 함께 작동하도록하는 방법을 찾는 데 관심이 있습니다. 내 현재 문제는 얕은 렌더러를 사용할 때 예상되는 Connect 구성 요소 만 전달한다는 것입니다.

wwalser 에 2016년 02월 19일

제안 된 이중 내보내기 방법은 select (mapStoreToState) 함수를 테스트하지 않은 상태로 둡니다. 독립적으로 테스트하려면 내보내기도해야하지만 테스트 이름은 또 변경해야합니다.

엄격히 "테스트의 이름으로"는 아닙니다. 실제로 리듀서와 함께 선택기 함수 (결국 mapStateToProps 가 무엇인지)를 정의하고 함께 테스트하는 것이 좋습니다. 이 로직은 UI와 무관하며 번들로 제공 할 필요가 없습니다. 일부 선택기에 대한 shopping-cart 예제를 살펴보십시오.

gaearon 에 2016년 02월 19일

👍3

그래서 @gaearon ,이 _selector_ 함수를 사용하여 상태에서 모든 데이터를 가져올 것을 제안합니까? 대부분의 경우 사람들은 상태에서 여러 속성을 읽고 컴포넌트의 소품에 할당하기 때문에 불필요한 오버 헤드가 많이 발생하지 않습니까?

romulobr 에 2016년 06월 15일

예, Redux에 대한 일반적인 제안 패턴은 state.some.nested.field 직접 액세스하는 대신 거의 모든 곳에서 선택기 기능을 사용하는 것입니다. 매우 간단한 "일반"함수일 수 있지만 가장 일반적으로 메모 기능을 제공하는 Reselect 라이브러리를 사용하여 함께 결합됩니다.

추가 오버 헤드가 발생하는 이유는 무엇입니까?

markerikson 에 2016년 06월 15일

여기에 설명 된대로 이중 내보내기를 수행했지만 connect 소스를 읽고 "Container"가 WrappedComponent 정적 속성의 "dumb"구성 요소에 대한 참조를 유지한다는 것을 깨달았습니다.

코드에서 : https://github.com/reactjs/react-redux/blob/master/src/components/connect.js#L344
문서에서 : https://github.com/reactjs/react-redux/blob/master/docs/api.md#static -properties

그래서 대신 :

// header.js
export const HeaderDumbComponent = (props) => <header><div>...</div></header>
export default connect(mapStateToProps)(HeaderDumbComponent)


// header.spec.js
import { HeaderDumbComponent } from './header'

it('renders', () => {
  expect(<HeaderDumbComponent />).to.not.be.null
})

"dumb"버전이 필요한 경우 WrappedComponent 를 사용하여 이중 내보내기를 방지 할 수 있습니다.

// header.js
const HeaderDumbComponent = (props) => <header><div>...</div></header>
export default connect(mapStateToProps)(HeaderDumbComponent)


// header.spec.js
import Header from './header'

it('renders', () => {
  expect(<Header.WrappedComponent />).to.not.be.null
})

@gaearon- WrappedComponent 는 문서에있는 것을 감안할 때 꽤 안정적인 속성 인 것 같습니다. 어떤 이유로 든 이런 방식으로 사용하지 말라고 조언 하시겠습니까?

jeffcarbs 에 2016년 10월 21일

👍14

내가하는 일은 언 래핑 된 구성 요소를 내보내고 mapStateToProps 및 mapDispatchToProps를 내보내 해당 함수를 단위 테스트 할 수 있도록하는 것입니다. 예를 들면 다음과 같습니다.

import {ManageCoursePage, mapStateToProps, mapDispatchToProps} from './ManageCoursePage';

describe("mapStateToProps", () => {
    function setup(courses, authors, id) {
        const state = {
            authors: authors
        };

        const ownProps = {
            params: {
                id: id
            }
        };

        return mapStateToProps(state, ownProps);
    }

    it('sets the course when a course id is set', () => {
        const courses = [ { id: "1", foo: "bar" }, { id: "2", foo: "notbar" } ];
        const authors = [];
        const id = "1";

        const props = setup(courses, authors, id);

        expect(props.course).toBe(courses[0]);
    });

    it('sets the course when a course id is not set', () => {
        const courses = [ { id: "1", foo: "bar" }, { id: "2", foo: "notbar" } ];
        const authors = [];

        const props = setup(courses, authors, null);

        expect(props.course).toEqual({});
    });

    it('sets the course when a course id is set that is not present in the courses list', () => {
        const courses = [ { id: "1", foo: "bar" }, { id: "2", foo: "notbar" } ];
        const authors = [];
        const id = "42";

        const props = setup(courses, authors, null);

        expect(props.course).toEqual({});
    });

    it('sets the authors formatted for a drop down list', () => {
        const courses = [];
        const authors = [ { id: "1", name: "John" }, { id: "2", name: "Jill" }];

        const props = setup(courses, authors, null);

        expect(props.authors).toEqual([
            { value: "1", text: "John" },
            { value: "2", text: "Jill" }
        ])
    });
});

claassen 에 2016년 11월 20일

👍3

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Redux: 스마트 구성 요소 단위 테스트

Header.js (스마트 구성 요소)

Header.test.js

가장 유용한 댓글

모든 19 댓글

관련 문제