Redux: 연결된 구성 요소가 중첩 된 연결된 구성 요소 테스트

두가지:

1) 이것은 사용법이며 아마도 스택 오버플로로 이동해야합니다.

2) connect 상위 구성 요소 사용 편의의 일부
unconnected 구성 요소에 대한 단위 테스트를 작성하고
redux를 신뢰하여 매장 주변의 배관을 처리해야합니다.

내가 의미하는 바가 명확하지 않으면 예제를 게시 할 수 있습니다.

몇 가지 생각 :

• 하나의 구성 요소에만 집중하는 한 가지 방법은 실제로 자식을 렌더링하지 않는 "얕은"렌더링을 사용하는 것입니다.
• 테스트에서 <Provider store={testStore}><ConnectedComponent /></Provider> 을 렌더링 할 수도 있습니다.

참고로 여기 React / Redux 테스트에 대한 여러 기사에 대한 링크가 있습니다. 도움이 될 수 있습니다 :

그리고 예, 사용법 질문으로서 이것은 다른 곳에서 실제로 더 잘 질문됩니다.

감사합니다 @markerikson 저는 현재 언급 한 후자의 방법을 시도하고 있지만 링크 목록도 북마크 할 것입니다. :)

한 번 구성 요소를 분리하여 테스트하려면 여전히 다음과 같은 작업을 수행하는 것이 좋습니다.

// Component.js
import React from 'react'

export const Component = ({ a, b, c }) => ( 
  // ...
)

// ...

export default connect(mapStateToProps, mapDispatchToProps)(Component)

그런 다음 테스트에서 연결되기 전에 구성 요소를 가져올 수 있습니다.

// Component.spec.js
import { Component } from './Component.js'
import { mount } from 'enzyme'

it('should mount without exploding', () => {
  mount(<Component a={1} b={2} c={3} />)
})

정말로 테스트하고 싶은 것이 Provider 를 렌더링하는 것이 합리적이라고 생각하는 것보다 상점의 변경 사항이 올바르게 전파되고 있다는 것이며, 테스트에서 많은 가치를 얻었는지 확실하지 않습니다.

여기서 제기되는 문제는 테스트중인 구성 요소가 직접 하위 또는 계층 아래 어딘가에 다른 연결된 구성 요소를 렌더링 할 때입니다. mount() 를 통해 전체 렌더링을 수행하면 하위 연결 구성 요소가 절대적으로 this.context.store 액세스를 시도하지만 찾지 못합니다. 따라서 주요 옵션은 얕은 테스트를 수행하여 하위 항목이 렌더링되지 않도록하거나 실제로 컨텍스트에서 저장소를 사용할 수 있도록 만드는 것입니다.

@markerikson 아 좋아, 나는 OP가 외부가 아닌 내부 구성 요소를 테스트하려고한다고 생각했다는 것을 다시 읽었습니다. 👍

지금까지 도와 주셔서 감사합니다.

현재 내가 겪고있는 주요 문제는 내부에 중첩 된 연결된 구성 요소에 상태를 전달할 수 없어 뷰가 올바르게 렌더링되지 않는다는 것입니다.

일반적으로 조롱 상태는 제가 실제로 꽤 고심 해 왔으며 주제에 대해 결정적인 것을 찾을 수 없었기 때문에 누군가 조롱 상태를 중첩 된 연결 또는 상위 구성 요소?

TIA

@StlthyLee : "통과 상태"란 무엇을 의미합니까? 테스트에서 <Provider store={store}><ComponentWithConnectedDescendants /></Provider> 를 렌더링하면 작업이 처리됩니다.

문제는 올바르게 처리하지 않는 것입니다. 그 안에 중첩 된 구성 요소에는 현재 어떤 이유로 인해 얻지 못하는 응용 프로그램 상태의 특정 매개 변수가 필요합니다.

@StlthyLee는 아마도 예제 / 요점 / codepen / repo-link 또는 무언가를 넣어야 할 것입니다. 여기에 용어 충돌이있는 것처럼 보이기 때문에 문제를 발견하는 데 시간이 덜 걸립니다.

@Koleok 희망적으로 이것은 명확하게 도움이 될 것입니다

https://gist.github.com/StlthyLee/02e116d945867a77c382fa0105af1bf3

그렇지 않다면 물어보십시오. 이것이 제가 밑바닥에 도달하고 싶은 것입니다. 지난 9-10 년 동안 Rails 세계에서 일하고 그 관점에서 TDD에 대해 잘 이해하고 있었기 때문에 저는 이제 React / Redux 세계에서 TDD에 대한 내 머리.

그래서 저는 지금이 문제의 밑바닥에 도달했다고 믿습니다. 그것은 테스트 문제가 아니라 다른 팀원이 만든 카피와 과거의 오류였습니다. 선호하는 TDD 방식보다는 코드에 맞게 테스트합니다. 여기에 제공된 모든 정보에 감사드립니다.

일부 사용 사례에서 작동 할 수있는 또 다른 옵션을 제공하기 위해 최근에 중첩 된 연결 구성 요소에서이 문제가 발생했습니다. 모의 저장소를 만드는 대신 각 구성 요소의 연결되지 않은 버전을 내보내 저장소없이 단위 테스트를 수행했습니다. 이 같은:

class TopLevelImpl extends React.PureComponent {
  // Implementation goes here
}

// Export here for unit testing.  The unit test imports privates and uses TopLevel
// with Enzyme's mount().
export const privates = {
  TopLevel: TopLevelImpl,
}

export const TopLevel = connect(mapStateToProps)(TopLevelImpl)

자식 중첩 구성 요소에 대해 동일한 작업을 수행하여 각 구성 요소를 독립적으로 테스트 할 수 있습니다.

그런 다음 최상위 연결 구성 요소를 가져 와서 앱의 render() 함수에서 소품으로 자식 연결 구성 요소를 전달했습니다. 그러나 최상위 구성 요소를 단위 테스트 할 때 연결된 구성 요소를 전달하는 대신 모의 구성 요소를 전달하여 올바른 위치에 렌더링되는지 확인합니다. 그러나 연결되지 않은 구성 요소를 전달할 수도 있습니다.

이 같은:

// Root render function
render() {
  return (
    <Provider store={store}>
      <TopLevel child1={<Child1 />} child2={<Child2 />} />
    </Provider>
  )
}

나는 실제로 당신의 아이디어를 좋아합니다. 하지만 대신 이렇게 해요

const props = {
  child1: () => (<div />),
  child2: () => (<div />)
}
<TopLevel {...props} />

이미 child1과 child2를 테스트했다면 TopLevel 구성 요소에 포함 할 필요가 없을 것입니다.

구성 요소를 조건부로 렌더링해야하는 경우에도 함수를 전달합니다.

나는 당신의 마지막 문장을 따르지 않습니다. 테스트는 하위 구성 요소를 다른 구성 요소로 전달하는 것과 어떤 관련이 있습니까?

잘. 예를 들어 하나 또는 몇 개의 내부 연결 구성 요소 를 사용하는 요소가 있습니다. 이 경우 외부 구성 요소를 테스트하려면 다음과 같이 수행합니다.

wrapper = mount(<ExternalComponent.WrappedComponent {...props} />)

그러나 내부 구성 요소 가 제대로 실행 필요하다는 오류 가 있습니다.

Invariant Violation: Could not find "store" in either the context or props

그런 다음 모의 상태 등을 전달하려고했습니다. 그러나 제 경우에는 비동기 호출, initialState 등을 포함하여 연결된 모든 구성 요소에 대해 많은 초기화를 수행해야하며 이와 관련된 다른 오류가 발생했습니다.

외부 구성 요소를 테스트하고 싶다면 모든 내부 연결된 구성 요소에 대해 모든 적절한 초기화를 수행하는 것이 과잉이라고 생각합니다.

그래서 저는 연결된 모든 컴포넌트 를 외부로 빈 div 로

오 예, 그것은 패턴에 대한 원래의 동기였습니다. 따라서 문장을 수정하려면 "이미 child1 및 child2를 테스트했다면 단위 테스트시 TopLevel 구성 요소에 전달할 필요가 없다고 생각합니다."라는 의미입니다.

동의합니다.

@StlthyLee , 불행히도 연결된 구성 요소가 중첩 된 구성 요소를 테스트하려고 할 때 동일한 문제에 직면했습니다.

특히 유용한 해결책은 테스트 환경에 따라 중첩 된 구성 요소를 redux 저장소에 연결하는 것입니다.

• 테스트가 실행되면 환경 변수 NODE_ENV="test" 합니다. 이 변수를 포착하고 구성 요소가 기본 속성을 받도록 할 수 있습니다. 이 경우 구성 요소가 저장소에 연결되어 있지 않으며 상위 구성 요소를 테스트 할 때 문제가 나타나지 않습니다.
• 다른 경우에는 구성 요소를 연결하십시오. 이는 애플리케이션에서 구성 요소를 실행할 때의 기본 시나리오입니다.

a) 먼저 환경이 test 인지 확인하는 도우미 함수가 필요합니다.

export default function ifTestEnv(forTestEnv, forNonTestEnv) {
  const isTestEnv = process && process.env && process.env.NODE_ENV === 'test';
  const hoc = isTestEnv ? forTestEnv : forNonTestEnv;
  return function(component) {
    return hoc(component);
  };
}

b) 다음으로 defaultProps() 및 connect() 는 환경에 따라 조건부로 적용되어야합니다.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import defaultProps from 'recompose/defaultProps';

import ifTestEnv from 'helpers/if_test_env';
import { fetch } from './actions';

class MyComponent extends Component {
   render() {
      const { propA, propB } = this.props;
      return <div>{propA} {probB}</div>
   }

   componentDidMount() {
      this.props.fetch();
   }
}

function mapStateToProps(state) {
  return {
    propA: state.valueA,
    propB: state.valueB
  };
}

export default ifTestEnv(
  defaultProps({
    propA: 'defaultA',
    propB: 'defaultB',
    fetch() {   }
  }),
  connect(mapStateToProps, { fetch })
)(MyComponent);

c) 테스트를 실행할 때 NODE_ENV 이 "test" 확인합니다.

• mocha CLI를 사용할 때 테스트 환경을 설정하기 위해 NODE_ENV='test' mocha app/**/*.test.jsx 접두사를 입력합니다.
• webpack의 경우 플러그인을 적용하십시오.

plugins: [
    // plugins...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('test')
      },
    })
]

@markerikson 두 가지 제안에 감사드립니다. 두 번째를 시도하고 Provider로 테스트하기 위해 구성 요소를 래핑했습니다. 이 경우 mapStateToProps 는 제대로 작동하지만 mapDispatchToProps 예상되는 결과를 얻지 못합니다. 여기서 테스트중인 구성 요소는 다른 연결된 구성 요소를 렌더링합니다.

내 mapDispatchToProps는 다음과 같습니다.

/* <strong i="10">@flow</strong> */
import { bindActionCreators } from 'redux';

import type { Dispatch } from './types';
import * as actions from './actions';

export default (dispatch: Dispatch, ownProps: Object): Object => ({
  actions: bindActionCreators(actions, dispatch),
});

여기서 반환 된 작업의 값은 undefined 입니다.

store.js

import { applyMiddleware, compose, createStore } from 'redux';
import { autoRehydrate } from 'redux-persist';
import thunk from 'redux-thunk';

import rootReducer from './reducers';
import { REHYDRATE } from 'redux-persist/constants';

const store = compose(autoRehydrate(), applyMiddleware(thunk, createActionBuffer(REHYDRATE)))(createStore)(rootReducer);

export default store;

나는 이것이 꽤 오래된 스레드라는 것을 알고 있지만 이것이 약간 성가신 문제라는 것을 알았고이 솔루션이 (나와 같은)이 스레드를 우연히 발견하는 사람에게 도움이 될 것이라고 생각했습니다.

실제로 Redux와 관련된 것을 테스트하지 않았기 때문에 내가 찾은 간단한 해결책은 전달 된 변경되지 않은 구성 요소 만 반환하도록 연결 함수를 조롱하는 것입니다.

예를 들어 응용 프로그램에 다음과 같은 구성 요소가있을 수 있습니다.

export class ExampleApp extends Component {
  render() {
  }
}

export default connect(
  null,
  { someAction }
)(ExampleApp);

그런 다음 테스트 파일의 시작 부분에 모의 연결 함수를 배치하여 Redux가 구성 요소와 상호 작용하는 것을 중지 할 수 있습니다.

jest.mock("react-redux", () => {
  return {
    connect: (mapStateToProps, mapDispatchToProps) => (
      ReactComponent
    ) => ReactComponent
  };
});

이 조롱은 연결된 자식을 마운트하는 모든 테스트 파일에 배치해야합니다.

@scottbanyard 어떻게 소품을 자식 구성 요소에 전달합니까?