reactjs - jest kiểm tra ảnh chụp lồng Redux "kết nối" các thành phần

Question

Khi chụp thử nghiệm (jest ảnh chụp) một thành phần được kết nối với cửa hàng Redux Tôi có thể xuất các thành phần thực tế ngoài các thành phần kết nối

// User.js 

/* ... */ 

export class User extends React.Component {/* ... */} 

/* ... */ 

export default connect(mapStateToProps)(User); 

Trong kiểm tra tập tin tôi có thể nhập khẩu các thành phần thực tế (không phải là phiên bản kết nối) và làm thử nghiệm ảnh chụp trên nó.

// User.spec.js 

import { User } from './User'; 

/* ... toMatchSnapshot() testing */ 

Nhưng tôi gặp sự cố khi thành phần được kết nối được lồng trong thành phần được kết nối khác. Ví dụ, giả sử User thành phần được lồng vào bên trong một thành phần kết nối -

// Wrapper.js 

import User from './User'; // importing the connected version 

/* ... */ 

export class Wrapper extends React.Component { 

    /* ... */ 

    render() { 
    return (
     <div> 
     /* ... */ 
     <User /> 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(Wrapper); 

Khi chạy thử nghiệm ảnh chụp trên Wrapper giống như cách tôi đã làm trên User mang lại cho tôi những lỗi sau:

Invariant Violation: Could not find "store" in either the context or props of "Connect(User)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(User)".` 

Có cách để làm cạn khi snapshotting? Hay tôi đang làm gì sai?

Answer 1

Trong trường hợp này cách tốt nhất là để kiểm tra Wrapper ngày của riêng mình bằng cách chỉ chế giễu User

import Wrapper from './Wrapper' 

jest.mock('./User',() => 'User') // note that the path to user is relative the test file not to the Wrapper.js file. 

này sẽ thay thế User với một thành phần đơn giản với tên User.