diff --git a/README.md b/README.md index 3e9796a..b310d27 100644 --- a/README.md +++ b/README.md @@ -850,8 +850,11 @@ of all cases covered: unchecked. - if there's more than one checkbox with the same `name` attribute, they are all treated collectively as a single form control, which returns the value - as an **array** containing all the values of the selected checkboxes in the + as an **array** containing all the values of the checkboxes in the collection. + - a hidden input with same name before the checkbox is allowed which is a + common workaround to allow browsers to send `false` for unchecked + checkboxes. - `` elements are all grouped by the `name` attribute, and such a group treated as a single form control. This form control returns the value as a **string** corresponding to the `value` attribute of the selected diff --git a/src/__tests__/to-have-form-values.js b/src/__tests__/to-have-form-values.js index 18b99d9..2bdc958 100644 --- a/src/__tests__/to-have-form-values.js +++ b/src/__tests__/to-have-form-values.js @@ -189,6 +189,21 @@ describe('.toHaveFormValues', () => { }).toThrowError(/must be of the same type/) }) + it('allows a checkbox and a hidden input which is a common workaround so forms can send "false" for a checkbox', () => { + const {container} = render(` +
+ `) + const form = container.querySelector('form') + expect(() => { + expect(form).toHaveFormValues({ + 'checkbox-with-hidden-false': ['0', '1'], + }) + }).not.toThrowError() + }) + it('detects multiple elements with the same type and name', () => { const {container} = render(`