diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx index c7eada21ba..9c6c5c41fd 100644 --- a/packages/react-select/src/__tests__/Select.test.tsx +++ b/packages/react-select/src/__tests__/Select.test.tsx @@ -3120,20 +3120,42 @@ test('renders with custom theme', () => { ).toEqual(primary); }); -test('form validation with `required` prop', () => { - const components = (value?: Option) => ( -
- +
+ ); - const { container, rerender } = render(components()); + const { container, rerender } = render(components()); - expect( - container.querySelector('#formTest')?.checkValidity() - ).toEqual(false); - rerender(components(BASIC_PROPS.options[0])); - expect( - container.querySelector('#formTest')?.checkValidity() - ).toEqual(true); -}); + expect( + container.querySelector('#formTest')?.checkValidity() + ).toEqual(false); + rerender(components(props.options[0])); + expect( + container.querySelector('#formTest')?.checkValidity() + ).toEqual(true); + }, + { + 'single select > should validate with value': { + props: { + ...BASIC_PROPS, + }, + }, + 'single select (isSearchable is false) > should validate with value': { + props: { + ...BASIC_PROPS, + isSearchable: false, + }, + }, + 'multi select > should validate with value': { + props: { + ...BASIC_PROPS, + isMulti: true, + }, + }, + } +); diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx index e61d7b074c..1f45f84041 100644 --- a/packages/react-select/src/__tests__/StateManaged.test.tsx +++ b/packages/react-select/src/__tests__/StateManaged.test.tsx @@ -475,3 +475,23 @@ cases( }, } ); + +test('`required` prop > should validate', () => { + const { container } = render( +
+