Làm thế nào để vượt qua cửa hàng một cách rõ ràng vào như một biện pháp để "Kết nối()"

Question

Tôi đang cố gắng để kiểm tra thành phần React của tôi và nhận được lỗi sau.

Vi phạm bất biến: Không thể tìm thấy "lưu trữ" trong ngữ cảnh hoặc đạo cụ của "Kết nối()". Hoặc là quấn thành phần gốc vào Nhà cung cấp <>, hoặc chuyển một cách rõ ràng "cửa hàng" làm điểm tựa cho "Kết nối()".

Lỗi xảy ra khi hiển thị Thành phần trong thử nghiệm.

beforeEach(() => { 
    Component = TestUtils.renderIntoDocument(<SideMenu />); 
}); 

Nó hoạt động tốt khi hiển thị Thành phần trên trang. Tuy nhiên trong thử nghiệm, tôi không thể chuyển cửa hàng một cách rõ ràng vào Hợp phần.

Ai đó có thể chỉ đúng hướng không?

Answer 1

connect là trang trí được cung cấp bởi react-redux. Một thành phần connect ed để redux là một thành phần thông minh và dự kiến ​​lưu trữ để có sẵn hoặc thông qua một prop hoặc như thông báo lỗi cho biết thông qua một Provider.

Trong khi thử nghiệm thành phần thông minh, bạn có thể cung cấp cửa hàng giả mạo làm prop. Tuy nhiên, khi có một thành phần con khác xuống dòng, người mong đợi store, cách prop sẽ không hoạt động.

Đây là cách cung cấp store cho thành phần import s thành phần con đăng ký store.

const initialState = {key: 'value'}; 
const store = createStore(initialState); 

component = TestUtils.renderIntoDocument(
    <Provider store={store(initialState)}> 
    {() => <SideMenu />} 
    </Provider> 
); 

Answer 2

Trong hầu hết các trường hợp, tôi thấy rằng nhập thành phần trong thử nghiệm hoạt động tốt cho tôi.

SideMenu.js:

export class SideMenu extends React.Component { 
// implementation 
} 

export default connect(mapStateToProps,)(SideMenu) 

SideMenu.spec.js:

import { SideMenu } from 'path/to/SideMenu.js' 

const props = { 
    // provide all necessary stubs and mocks for redux props and actions 
} 
component = TestUtils.renderIntoDocument(<SideMenu {...props} />); 

Lưu ý: như Салман chỉ ra phương pháp này sẽ không hoạt động khi có một thành phần con xuống dòng, người mong đợi số store.