玩笑酶找到给出错误的容器试验

Question

我有一个反应容器：

export const SomeContainer = ({disabled, onClick}) => { 
    let someElement = <img src="/path"> 
    return (
    <CustomButton className="my-class" icon={someElement} onClick={onClick} disabled={disabled}> 
); 
}; 

const mapStateToProps = (state) => ({ 
    disabled: state.stateSet1.disabled, 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    onClick:() => { dispatch(someAction()); }, 
}); 

SomeContainer.propTypes = { 
    disabled: PropTypes.bool.isRequired, 
    onClick: PropTypes.func.isRequired, 
}; 

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

我写这样的测试：

import { SomeContainer } from './SomeContainer' 

describe('SomeContainer',() => { 
    const onClickMock = jest.fn(); 

    // this test is passing 
    it('has my class',() => { 
    const initialProps = { 
     disabled: false, 
     onClick: onClickMock, 
    }; 
    const someContainer = shallow(<SomeContainer {...initialProps} />); 
    expect(someContainer.hasClass('my-class')).toEqual(true); 
    }); 

    // this test is failing 
    it('has image icon',() => { 
    const initialProps = { 
     disabled: false, 
     onClick: onClickMock, 
    }; 
    const someContainer = shallow(<SomeContainer {...initialProps} />); 
    expect(someContainer.find('img')).toEqual(true); 
    }); 
}); 

的错误是：

TypeError: val.entries is not a function 

    at printImmutableEntries (node_modules/pretty-format/build/plugins/immutable.js:45:5) 
    at Object.exports.serialize (node_modules/pretty-format/build/plugins/immutable.js:179:12) 
    at printPlugin (node_modules/pretty-format/build/index.js:245:10) 
    at printer (node_modules/pretty-format/build/index.js:290:12) 
    at keys.map.key (node_modules/pretty-format/build/plugins/lib/markup.js:30:19) 
    at Array.map (native) 
    at exports.printProps (node_modules/pretty-format/build/plugins/lib/markup.js:28:3) 
    at Object.exports.serialize (node_modules/pretty-format/build/plugins/react_element.js:57:24) 
    at printPlugin (node_modules/pretty-format/build/index.js:245:10) 
    at printer (node_modules/pretty-format/build/index.js:290:12) 
    at keys.map.key (node_modules/pretty-format/build/plugins/lib/markup.js:30:19) 
    at Array.map (native) 
    at exports.printProps (node_modules/pretty-format/build/plugins/lib/markup.js:28:3) 
    at Object.exports.serialize (node_modules/pretty-format/build/plugins/react_element.js:57:24) 
    at printPlugin (node_modules/pretty-format/build/index.js:245:10) 
    at printer (node_modules/pretty-format/build/index.js:290:12) 
    at printObjectProperties (node_modules/pretty-format/build/collections.js:180:21) 
    at printComplexValue (node_modules/pretty-format/build/index.js:232:42) 
    at printer (node_modules/pretty-format/build/index.js:302:10) 
    at printObjectProperties (node_modules/pretty-format/build/collections.js:180:21) 
    at printComplexValue (node_modules/pretty-format/build/index.js:232:42) 
    at prettyFormat (node_modules/pretty-format/build/index.js:446:10) 
    at pass (node_modules/expect/build/matchers.js:439:50) 
    at message (node_modules/expect/build/index.js:107:16) 
    at Object.throwingMatcher [as toEqual] (node_modules/expect/build/index.js:215:23) 
    at Object.<anonymous> (tests/jest/containers/SomeButton.test.js:63:38) 
    at process._tickCallback (internal/process/next_tick.js:103:7) 

我测试这个错误吗？我无法弄清楚这个测试有什么问题。我有类似的测试反应组件（它不使用mapDispatchToProps，但使用连接来获得状态），那些传递（我在那里使用mount）。我也试图在提供者测试中包装它，但得到相同的错误。

如果我使用的mount代替shallow我得到这个错误：

TypeError: 'Symbol(Symbol.toPrimitive)' returned for property 'Symbol(Symbol.toPrimitive)' of object '[object Object]' is not a function 

Answer 1

如果你需要测试的子组件的存在（这是比你的容器组件的直接子深），您需要使用render，否则孩子不会得到渲染。

此外，为了测试Redux的连接部件，其中测试不依赖于终极版功能的常见模式，就是出口第二，不default从组件文件解开组件。例如：

export unwrappedSomeContainer = SomeContainer; 
export default connect(mapStateToProps, mapDispatchToProps)(SomeContainer); 

然后，在您的测试，导入展开的版本：

import { unwrappedSomeContainer } from './SomeContainer'; 

// In test 
const someContainer = shallow(<unwrappedSomeContainer {...initialProps} />); 

这样，做一个浅渲染的时候，你不会被阻止的高阶组件redux作为父项添加到您尝试测试的组件中。