React Router 4 và enzyme

Question

Ive chuyển sang bộ định tuyến phản ứng v4 và một vài thử nghiệm cần phải được thực hiện lại. Tôi có kịch bản sau đây:

• gắn một thành phần (kiểm tra nếu methodA đã được gọi là)
• thay đổi đạo cụ bằng enzyme bao bọc phương pháp: setProps
• kiểm tra nếu phương pháp đã được gọi là hai lần

Và điều đó khá dễ dàng với bộ định tuyến cũ .. nhưng nó rất khó với bộ định tuyến cũ:

Nếu thành phần (hoặc trẻ em) chứa ví dụ Link, điều đó có nghĩa là chúng ta phải cung cấp một contxt thích hợp để kết xuất thành phần. Đó là lý do MemoryRouter đã được tạo:

const comp = mount(
     <MemoryRouter> 
     <Comp {...someProps} /> 
     </MemoryRouter> 
    ); 
//here comes assertion about spy getting called 

nhờ đó chúng tôi có thể làm cho thành phần (biết thêm: https://reacttraining.com/react-router/web/guides/testing) Nhưng .. nếu chúng ta hãy nhìn vào setProps phương pháp tại enzyme thư viện (http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html):

Phương pháp đặt đạo cụ của thành phần gốc và hiển thị lại.

Nó có nghĩa là nếu tôi gọi comp.setProps ({..} newProps), nó thực sự thay đổi đạo cụ đường (MemoryRouter), nhưng doesnt thay đổi đạo cụ thành phần của tôi, mà sucks như là địa ngục.

Mọi thông tin chi tiết về trường hợp này?

Answer 1

Bạn có thể viết trình bao bọc xung quanh MemoryRouter và chuyển tất cả các đạo cụ xuống đến nút cần được kiểm tra.

const CompWrappedWithMemoryRouter = (props) => { 
    return (
     <MemoryRouter> 
      <Comp {...props /> 
     </MemoryRouter> 
    ) 
} 

sau đó sử dụng nó dĩ nhiên

const comp = mount(
     <CompWrappedWithMemoryRouter {...someProps} /> 
    ); 

tại comp.setProps nên làm việc