Làm cách nào để một trạng thái truy cập vào thành phần React lồng nhau được bao bọc bởi một HOC?

Question

Tôi đang sử dụng Enzyme và chúng tôi thực sự có thể sử dụng thành phần example được đưa ra trong tài liệu làm nền tảng cho câu hỏi của tôi.

Giả sử thành phần <Foo /> này sử dụng thành phần <Link> từ ReactRouter và do đó chúng tôi cần bọc nó trong một <MemoryRouter> để thử nghiệm.

Đây là vấn đề.

it('puts the lotion in the basket',() => { 
    const wrapper = mount(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want! 
    wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root! 
}) 

Vì vậy, không chắc chắn cách truy cập trạng thái thành phần cục bộ khi sử dụng <MemoryRouter>.

Có lẽ tôi đang thực hiện một bài kiểm tra không biết gì? Đang cố gắng để có được/thiết lập trạng thái thành phần xấu thực hành trong thử nghiệm? Tôi không thể tưởng tượng nó là, như Enzyme có phương pháp để nhận/thiết lập trạng thái thành phần.

Chỉ cần không chắc chắn làm thế nào người ta có nghĩa vụ phải truy cập vào bên trong của một thành phần bọc trong <MemoryRouter>.

Bất kỳ trợ giúp nào sẽ được đánh giá rất nhiều!

Answer 1

Vì vậy, có vẻ như với latest release của Enzyme, có khả năng khắc phục sự cố về trạng thái truy cập này trên thành phần con.

Hãy nói rằng chúng tôi có <Foo> (chú ý sử dụng Phản ứng Router của <Link>)

class Foo extends Component { 
    state = { 
    bar: 'here is the state!' 
    } 

    render() { 
    return (
     <Link to='/'>Here is a link</Link> 
    ) 
    } 
} 

Lưu ý: Đoạn mã sau chỉ có sẵn trong Enzyme v3.

Xem xét lại mã kiểm tra, chúng tôi hiện nay có thể viết như sau

it('puts the lotion in the basket',() => { 
    const wrapper = mount(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    expect(wrapper.find(Foo).instance().state).toEqual({ 
    bar: 'here is the state!' 
    }) 
}) 

Sử dụng wrapper.find(Child).instance() chúng tôi có thể truy cập vào trạng thái Child 's mặc dù nó là một thành phần lồng nhau. Trong các phiên bản Enzyme trước, chúng tôi chỉ có thể truy cập instance trên thư mục gốc. Bạn cũng có thể gọi hàm setState trên wrapper Child!

Chúng ta có thể sử dụng một mô hình tương tự với các bài kiểm tra shallowly render của chúng tôi

it('puts the lotion in the basket shallowly',() => { 
    const wrapper = shallow(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    expect(wrapper.find(Foo).dive().instance().state).toEqual({ 
    bar: 'here is the state!' 
    }) 
}) 

Lưu ý việc sử dụng dive trong các thử nghiệm nông cạn, có thể được chạy trên một đơn nút, không DOM, và sẽ trở lại nút , nông cạn.

---

Refs:

• https://github.com/airbnb/enzyme/issues/361
• https://github.com/airbnb/enzyme/issues/1289
• https://github.com/airbnb/enzyme/blob/master/docs/guides/migration-from-2-to-3