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

Question

我希望能夠測試作爲連接組件導出的組件的方法，因此我需要到達該組件的實例。

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

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

Answer 1

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

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

Answer 2

最簡單的選擇是導出未連接的組件，並在您傳遞將從商店中獲得的道具時創建測試（基本上繞過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() 
    }) 
    }) 
}) 

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