玩笑酶找到給出錯誤的容器試驗

我有一個反應容器：玩笑酶找到給出錯誤的容器試驗

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

來源

2017-09-18 Yusufali2205

您在測試塊中定義對象的方式是錯誤的。每個對象條目都是由冒號分隔的鍵值對，而不是等號。 'const initialProps = {disabled：false，...}' – nbkhope

@nbkhope謝謝你的指出。我在這裏糾正了它，它在我的原始代碼中正確定義。 – Yusufali2205

當你淺裝載它時，SomeContainer返回一個CustomButton組件。這就是你將要得到的。所以那裏沒有'img'。你不應該測試SomeContainer。相反，你應該測試CustomButton。 SomeContainer的測試只應確保您將正確的道具傳遞給CustomButton。 – nbkhope

如果你需要測試的子組件的存在（這是比你的容器組件的直接子深），您需要使用render，否則孩子不會得到渲染。

此外，爲了測試Redux的連接部件，其中測試不依賴於終極版功能的常見模式，就是出口第二，不default從組件文件解開組件。例如：

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

然後，在您的測試，導入展開的版本：

import { unwrappedSomeContainer } from './SomeContainer'; 

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

這樣，做一個淺渲染的時候，你不會被阻止的高階組件redux作爲父項添加到您嘗試測試的組件中。

來源

2017-09-18 23:27:37 monners

我已經在執行您所建議的更改。唯一的區別是我有第一行自身的解包組件的'export'。並且我無法使用'render'或'mount'，如果我使用的話，我得到'TypeError：'符號（Symbol.toPrimitive）'的錯誤返回給對象'[Symbol.toPrimitive']對象]'是不是一個函數' – Yusufali2205

你有沒有解決這個問題？ – Edmund

玩笑酶找到給出錯誤的容器試驗

回答

相關問題