React componentWillReceiveProps sử dụng enzyme

Question

Tôi sẽ kiểm tra các chức năng vòng đời bao gồm componentWillReceiveProps sử dụng enzyme.

Trước bất cứ điều gì khác, thành phần của tôi phải được bao bọc materialUi styles và được kết nối với Redux. Nếu không, sẽ có lỗi trong hàm render vì tôi sử dụng các thành phần material-ui bao gồm FlatButton.

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) 

Vì vậy, vấn đề là tôi không thể sử dụng setProps() cho MyComponent vì enzyme không cho phép áp dụng thành phần không phải gốc. Tôi không thể kiểm tra componentWillReceiveProps hoặc các phần cần thiết khác bằng cách thay đổi đạo cụ.

Làm cách nào để tôi có thể đặt/thay đổi đạo cụ của MyComponent để tôi có thể kiểm tra componentWillReceiveProps?

Answer 1

Tốt hơn nên kiểm tra thành phần của bạn trong sự cô lập. Vấn đề là material-ui đang chuyển xuống đạo cụ của nó bằng cách sử dụng React context. Bạn có thể chỉ định ngữ cảnh của thành phần theo cách này:

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, 
    } 
    } 
); 

Một điều khác bạn cần phải tách riêng thành phần của mình là xóa <Provider>. Thay vì kiểm tra thành phần được kết nối của bạn, hãy thử tự kiểm tra thành phần theo cách được mô tả trong tài liệu Redux: Testing Connected Components

Xuất thành phần linh kiện và thành phần kết nối nhanh chóng, sau đó đi qua đạo cụ. Ví dụ về các thành phần với hàng xuất khẩu:

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) 

Bây giờ bạn có thể nhập các thành phần undecorated trong tập tin thử nghiệm của bạn như thế này:

import { MyComponent } from './MyComponent'; 

Và thử nghiệm cuối cùng có thể nhìn theo cách này:

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(...); 
}); 

Answer 2

Nếu bạn muốn kiểm tra myComponent, bạn nên

const wrapper = mount(MyComponent); 

Những vấn đề khác như nhà cung cấp không phải là một phần của myComponent vì vậy không nên được bao gồm trong các thử nghiệm đơn vị cho nó.