Jest Snapshot anders beim Testen über CI vs lokal

Question

Ich habe Jest Snapshot Tests implementiert, die funktioniert super. Das Einzige, was ich nicht lösen kann, ist, dass meine Komponente einen anderen Snapshot auf meinem CI darstellt. Mein Test ist:

/* 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(); 
    }); 
}); 

Und die Komponente:

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, 
}; 

Ich enzyme und enzyme-to-json mit dem Schnappschuss zu erzeugen. Die Komponente selbst ist eine Hülle um react-select. Wenn lokal alles Testen ist in Ordnung, aber auf meinem CI es Fehler mit:

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) 

So optionComponent und valueComponent unterschiedliche Werte haben, im Vergleich zu meinem lokalen Snapshots. Was könnte diese Diskrepanz zwischen meinen lokalen und meinen Remote-Tests verursachen?

Answer 1

aktualisieren(3. Oktober 2016): Jest 16.0 wurde with the fix veröffentlicht!

---

Dies ist ein known issue und wird in Jest V16 (source) fixiert werden. In PR #1752 behoben.

Es gibt ein Problem, wie Node.js Funktionsnamen behandelt. Es sollte in Ordnung sein, wenn Sie die exakt gleiche Version von Node.js auf dem lokalen Computer und CI verwenden.

Zu Ihrer Information besteht die Lösung in JEST darin, den Namen aus dem Snapshot zu entfernen. Es wird wie folgt aussehen:

optionComponent={[Function]} 

Ein Trick/Hack pointed in der Ausgabe ist die Funktion in einer anonymen Funktion zu wickeln:

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

Leider ist dies in der react-select Bibliothek geschehen würde.