로컬에서 CI를 통해 테스트 할 때 Jest 스냅 샷이 달라집니다.

Question

jest snapshot testing을 구현했습니다. 내가 해결할 수없는 것은 내 구성 요소가 내 CI에서 다른 스냅 샷을 렌더링한다는 것입니다. 내 시험은 다음과 같습니다

/* eslint-env jest */ 
/* eslint import/no-extraneous-dependencies: "off" */ 

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { shallowToJson } from 'enzyme-to-json'; 
import Combobox from '../Combobox'; 

describe('<Combobox />',() => { 
    it('renders correctly',() => { 
    const wrapper = shallow(
     <Combobox 
     items={[]} 
     placeholder="" 
     valueKey="" 
     labelKey="" 
     /> 
    ); 

    expect(shallowToJson(wrapper)).toMatchSnapshot(); 
    }); 
}); 

그리고 구성 요소입니다 : 내가 스냅 샷을 생성하는 enzyme 및 enzyme-to-json을 사용하고

import React, { PropTypes } from 'react'; 
import Select from 'react-select'; 

export default class Combobox extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     currentValue: null, 
    }; 
    this.updateValue = this.updateValue.bind(this); 
    } 

    updateValue(newValue) { 
    this.setState({ 
     currentValue: newValue, 
    }); 
    } 

    render() { 
    return (
     <Select 
     placeholder={this.props.placeholder} 
     valueKey={this.props.valueKey} 
     labelKey={this.props.labelKey} 
     options={this.props.items} 
     value={this.state.currentValue} 
     onChange={this.updateValue} 
     /> 
    ); 
    } 
} 

Combobox.propTypes = { 
    items: PropTypes.array.isRequired, 
    placeholder: React.PropTypes.string.isRequired, 
    valueKey: React.PropTypes.string.isRequired, 
    labelKey: React.PropTypes.string.isRequired, 
}; 

. 구성 요소 자체는 react-select 주위의 래퍼입니다. 로컬에서 테스트 할 때 모든 괜찮지 만, 내 CI의 IT 오류에 :

FAIL src/components/__tests__/Combobox.test.jsx 
    ● <Combobox /> › renders correctly 

    Received value does not match the stored snapshot 1. 

    - Snapshot 
    + Received 

    <Select 
     // ... 
    - optionComponent={[Function anonymous]} 
    + optionComponent={[Function Constructor]} 
     // ... 
    - valueComponent={[Function anonymous]} 
    + valueComponent={[Function Constructor]} 
     valueKey="" /> 

     at Object.<anonymous> (src/components/__tests__/Combobox.test.jsx:20:82) 
     at process._tickCallback (internal/process/next_tick.js:103:7) 

그래서 optionComponent 및 valueComponent 내 로컬 스냅 샷에 비해 다른 값을 가지고있다. 로컬 테스트와 원격 테스트간에 이러한 불일치가 발생할 수 있습니까?

Answer 1

업데이트(2016년 10월 3일) : 농담 16.0 with the fix을 발표했다!

---

이것은 known issue이며 농담의 V16 (source)에 고정된다. PR #1752에서 수정.

Node.js가 함수 이름을 처리하는 방법에 문제가 있습니다. 로컬 컴퓨터 및 CI에서 정확히 동일한 버전의 Node.js을 사용하는 것이 좋을 것입니다.

정보를 얻으려면 JEST의 솔루션은 스냅 샷에서 이름을 제거하는 것입니다. 그것은 다음과 같이 표시됩니다

optionComponent={[Function]} 

트릭이/문제에 pointed 해킹 익명 함수에서 함수를 래핑하는 것입니다 :

-  onSelect={onSelectHandler} 
+  onSelect={(...args) => onSelectHandler(...args)} 

불행하게도, 이것은 react-select 도서관에서 일어날 것이다.