Redux form onSubmit giá trị rỗng đối tượng trong thử nghiệm

Question

Giá trị trong onSubmit xử lý luôn là một đối tượng trống. Làm thế nào để vượt qua một số giá trị cho nó để tôi có thể kiểm tra phụ thêm?

kiểm tra:

const store = createStore(combineReducers({ form: formReducer })); 

const setup = (newProps) => { 
    const props = { 
    ...newProps, 
    }; 
    expect.spyOn(store, 'dispatch'); 

    const wrapper = mount(
    <Provider store={store}> 
     <RegisterFormContainer {...props} /> 
    </Provider>, 
); 

    return { 
    wrapper, 
    props, 
    }; 
}; 

describe('RegisterFormContainer.integration',() => { 
    let wrapper; 

    it('should append form data',() => { 
    ({ wrapper } = setup()); 

     const values = { 
      userName: 'TestUser', 
      password: 'TestPassword', 
     }; 

     expect.spyOn(FormData.prototype, 'append'); 

     // Passing values as second argument DOESN'T work, it's just an empty object 
     wrapper.find('form').simulate('submit', values); 

     Object.keys(values).forEach((key) => { 
      expect(FormData.prototype.append).toHaveBeenCalledWith(key, values[key])); 
     }); 

     expect(store.dispatch).toHaveBeenCalledWith(submit()); 
    }); 
}); 

container:

const mapDispatchToProps = dispatch => ({ 
    // values empty object 
    onSubmit: (values) => { 
    const formData = new FormData(); 

    Object.keys(values).forEach((key) => { 
     formData.append(key, values[key]); 
    }); 

    return dispatch(submit(formData)); 
    }, 
}); 

export default compose(
    connect(null, mapDispatchToProps), 
    reduxForm({ 
    form: 'register', 
    fields: ['__RequestVerificationToken'], 
    validate: userValidation, 
    }), 
)(RegisterForm); 

Component:

const Form = ({ error, handleSubmit }) => (
    <form onSubmit={handleSubmit} action=""> 
    <Field className={styles.input} name="username" component={FormInput} placeholder="Username" /> 

    <button type="submit"> 
     Register 
    </button> 
    </form> 
); 

Answer 1

Vấn đề ở đây là bạn đang xem cách biểu mẫu thực tế hoạt động. Nếu bạn cố gắng mô phỏng sự kiện submit trên biểu mẫu, thì cần có các giá trị biểu mẫu thực được lưu trữ trong lưu trữ redux để biểu mẫu redux trích xuất các giá trị đó và chuyển chúng đến trình xử lý onSubmit.

Vấn đề cơ bản là bạn không nên kiểm tra chức năng của redux-form end-to-end trong các bài kiểm tra đơn vị của bạn. Kiểm tra xem ứng dụng của bạn có hoạt động từ đầu đến cuối hay không sẽ xảy ra trên thử nghiệm tích hợp.

gợi ý của tôi trong tình huống này là

1. Giả sử rằng miễn là bạn đang sử dụng redux-form chính xác, đó là sự hợp thức-to-cửa hàng hoạt động.
2. Viết kiểm tra để đảm bảo rằng các hàm và giá trị bạn đang chuyển đến redux-form thành phần có liên quan là chính xác và hoạt động chính xác.
3. Duy trì một sự tách biệt giữa các thành phần thử nghiệm và container, bài viết này sẽ cho bạn a nice overview on how to test connected components

Vì vậy, kiểm tra mapDispatchToProps kỹ lưỡng để đảm bảo rằng các chức năng nó tạo ra hành xử giống như bạn mong đợi. Sau đó, đảm bảo bạn đang chuyển đúng chức năng và đạo cụ vào đúng vị trí trong các thành phần và vùng chứa của bạn. Sau đó, bạn có thể yên tâm giả định rằng mọi thứ đều hoạt động miễn là bạn đang sử dụng redux và redux-form right.

Hy vọng điều này sẽ hữu ích!

Answer 2

simulate chấp nhận một tham số thứ hai là đối tượng sự kiện.

wrapper.find('form').simulate('submit', { target });