当通过CI与本地测试时Jest snapshot不同时

我实施了jest快照测试，效果很好。唯一我无法解决的是我的组件在我的CI上呈现不同的快照。我的测试是：当通过CI与本地测试时Jest snapshot不同时

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

和组件是：

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

我使用enzyme和enzyme-to-json生成快照。该组件本身是围绕react-select的包装。本地测试时一切正常，但在我的CI它的错误与：

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相比，我的本地快照具有不同的值。什么可能导致我的本地和我的远程测试之间的这种差异？

来源

2016-09-30 vkjb38sjhbv98h4jgvx98hah3fef

起初我虽然是模块的区别，但是远程安装的是较新的模块，但'rm -rf node_modules && npm i'没有改变我的本地快照。 – vkjb38sjhbv98h4jgvx98hah3fef

更新（2016年10月3日）：玩笑16.0发布with the fix！

这是一个known issue和将被固定在玩笑V16（source）。固定在PR #1752。

Node.js如何处理函数名是一个问题。如果您在本地计算机和配置项上使用完全相同版本的Node.js，则应该可以。

有关您的信息，JEST中的解决方案将从快照中删除名称。它看起来是这样的：

optionComponent={[Function]}

特技/在这个问题破解pointed是包装的功能，在一个匿名函数：

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

不幸的是，这将有在react-select库发生。

来源

2016-09-30 09:50:42

啊！我不会想到我自己，谢谢！ – vkjb38sjhbv98h4jgvx98hah3fef

谢谢！我遇到了我的快照在本地通过但不在CircleCI上的问题。在确认我的节点版本在本地和CI上匹配后，终于能够看到在本地计算机上无法看到的快照失败。 – Bert

当通过CI与本地测试时Jest snapshot不同时

回答

相关问题