🐞 fix <Form /> component content-type json type missing

src/__tests__/form.test.tsx

@@ -26,6 +26,13 @@ const server = setupServer(
   rest.post('/get', (_, res: ResponseComposition, ctx: RestContext) => {
     return res(ctx.status(200));
   }),
+  rest.post('/json', (req, res: ResponseComposition, ctx: RestContext) => {
+    if (req.headers.get('content-type') === 'application/json') {
+      return res(ctx.status(200));
+    }
+
+    return res(ctx.status(500));
+  }),
 );
 
 describe('Form', () => {
@@ -264,4 +271,34 @@ describe('Form', () => {
       expect(fetcher).toBeCalled();
     });
   });
+
+  it('should include application/json header with encType supplied', async () => {
+    const onSuccess = jest.fn();
+    const App = () => {
+      const {
+        control,
+        formState: { isSubmitSuccessful },
+      } = useForm();
+
+      return (
+        <Form
+          action={'/json'}
+          control={control}
+          encType="application/json"
+          onSuccess={onSuccess}
+        >
+          <button>Submit</button>
+          <p>{isSubmitSuccessful ? 'submitSuccessful' : 'submitFailed'}</p>
+        </Form>
+      );
+    };
+
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(onSuccess).toBeCalled();
+    });
+  });
 });

src/form.tsx

@@ -116,7 +116,7 @@ export function Form<
           const shouldStringifySubmissionData = [
             headers && headers['Content-Type'],
             encType,
-          ].includes('json');
+          ].some((value) => value && value.includes('json'));
 
           const response = await fetch(action, {
             method,