反應測試：如何到達連接（redux）組件的實例

我希望能夠測試作爲連接組件導出的組件的方法，因此我需要到達該組件的實例。反應測試：如何到達連接（redux）組件的實例

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

我在遇到該實例時遇到問題。

來源

2017-08-08 Asso

還導出未連接的組件？ http://redux.js.org/docs/recipes/WritingTests.html#connected-components – azium

@azium似乎是唯一的方法，謝謝azium我正在與此。 – Asso

我採用的方法是爲MyComponent,mapStateToProps和mapDispatchToProps創建單元測試。它看起來像MyComponent的單元測試會完成你想要做的。

使用Redux進行集成測試有助於確定是否有將來的升級會破壞您所依賴的功能，但您無需使用Redux完全引導您的應用程序，以確定組件的方法是否按預期工作。

來源

2017-08-08 18:25:39

最簡單的選擇是導出未連接的組件，並在您傳遞將從商店中獲得的道具時創建測試（基本上繞過mapStateToProps）。

另一個選項是爲連接組件創建一個測試。在這種情況下，您需要將其包裝在Provider中，並給它一個初始狀態，以便它從商店本身獲取信息。，做一個輔助的一個例子，與jest將是：

import React from 'react' 
import renderer from 'react-test-renderer' 
import { Provider } from 'react-redux' 

import configureMockStore from 'redux-mock-store' 

const fullRender = (jsx, state = {}) => { 
    const store = configureMockStore([](state) 
    const component = renderer.create(
    <Provider store={store}> 
     {jsx} 
    </Provider> 
) 

    return { store, component } 
} 
export default fullRender

這可以被擴展到使用更實際的設置中，等，包括在狀態的中間件（如咚）或也考慮路由考慮。然後你就可以建立自己的測試像這樣（再次使用jest）：

import React from 'react' 
import { fullRender } from '../../test' 
import Header from './Header' 

describe('components',() => { 
    let state = { a: { b: 3 } } 
    describe('Header',() => { 
    it('renders correctly',() => { 
     const { component } = fullRender(<Header />, state) 
     expect(component.toJSON()).toMatchSnapshot() 
    }) 
    }) 
})

你可以存儲你的測試作爲夾具的「快照」，並將其提供給您的測試也是如此。

來源

2017-08-08 18:34:32

感謝馬里奧，但是這是測試組件的渲染，沒有達到它的實例。可以說，我需要測試是這樣的：常量componentInstance = <--- 常量methodReturnValue = componentInstance.method（）;期望（methodReturnValue）.to.be.true; 期望 – Asso

mhm如果你想擁有一個你可以手動運行它的方法的組件，也許你可以用'酶'來安裝它，儘管我不確定這是否被認爲是一種好的做法 –

反應測試：如何到達連接（redux）組件的實例

回答

相關問題