反應測試componentWillReceiveProps使用酶

我要測試生命週期的功能，包括使用酶的componentWillReceiveProps。反應測試componentWillReceiveProps使用酶

在此之前，我的組件應該包裝materialUi styles並與redux連接。否則，渲染函數中會出現錯誤，因爲我使用了包含FlatButton的material-ui組件。

const wrapper = mount(
     <MuiThemeProvider muiTheme={muiTheme}> 
     <Provider store={store}> 
      <MemoryRouter> 
       <MyComponent /> 
      </MemoryRouter> 
     </Provider> 
     </MuiThemeProvider>) 

// absolutely fail 
wrapper.find(MyComponent).setProps({ something }) 
expect(MyComponent.prototype.componentWillReceiveProps.calledOnce).toBe(true)

所以問題是我不能使用setProps（）MyComponent，因爲酶不允許應用非根組件。我無法通過更換道具來測試componentWillReceiveProps或其他必要部件。

如何設置/更改MyComponent的道具，以便我可以測試componentWillReceiveProps？

來源

2017-03-23 Oscar

最好是單獨測試你的組件。問題是material-ui正在使用React context傳遞它的道具。您可以指定組件的背景是這樣的：

import React from 'react'; 
import { mount } from 'enzyme'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

const wrapper = mount(
    <MyComponent />, 
    { 
    context: { 
     muiTheme: getMuiTheme(), 
    }, 
    childContextTypes: { 
     muiTheme: React.PropTypes.object.isRequired, 
    } 
    } 
);

你需要隔離的組件的另一件事是，除去<Provider>。 Redux文檔：Testing Connected Components

不久之後 - 導出組件和連接組件，然後通過傳遞道具來測試組件。

import { connect } from 'react-redux' 

// Use named export for unconnected component (for tests) 
export class MyComponent extends Component { /* ... */ } 

// Use default export for the connected component (for app) 
export default connect(mapStateToProps)(MyComponent)

現在，您可以導入未修飾的成分在您的測試文件中像這樣：

import { MyComponent } from './MyComponent';

和最終測試可以這樣看：

import React from 'react'; 
import { mount } from 'enzyme'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import { MyComponent } from './MyComponent'; 

test('test component',() => { 
    const wrapper = mount(
    <MyComponent />, 
    { 
     context: { 
     muiTheme: getMuiTheme(), 
     }, 
     childContextTypes: { 
     muiTheme: React.PropTypes.object.isRequired, 
     } 
    } 
); 

    // Test something 
    const p = wrapper.find(...); 
    expect(...).toEqual(...); 

    // Change props 
    wrapper.setProps({foo: 1}); 

    // test again 
    expect(...).toEqual(...); 
});

來源

2017-03-27 14:25:53 ischenkodv

-1

如果你想測試MyComponent的，你應該

const wrapper = mount(MyComponent);

像提供商的東西都不是爲MyComponent的一部分，所以不應該被包含在它的單元測試。

來源

2017-03-23 19:23:31 brickingup

與出口組件的例子如果是這樣，測試時出現在渲染函數中的錯誤，因爲我渲染了material-ui按鈕 – Oscar

然後，您應該嘲笑material-ui按鈕，因爲這超出了單元測試的範圍。 – brickingup

反應測試componentWillReceiveProps使用酶

回答

相關問題