test(react-router): check FormData serialization in transformer (#3139

)

packages/react-router/src/transformer.ts

@@ -94,6 +94,7 @@ const createTransformer = <T extends string>(
 })
 
 // Keep these ordered by predicted frequency
+// Also, make sure that they are unit tested in transformer.test.tsx
 const transformers = [
   createTransformer(
     // Key

packages/react-router/tests/transformer.test.tsx

@@ -1,69 +1,102 @@
-import { describe, expect, test } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
-import { defaultTransformer } from '../src/transformer'
+import { defaultTransformer as tf } from '../src/transformer'
 
 describe('transformer.stringify', () => {
-  test('should stringify dates', () => {
+  it('should stringify dates', () => {
     const date = new Date('2021-08-19T20:00:00.000Z')
-    expect(defaultTransformer.stringify(date)).toMatchInlineSnapshot(`
+    expect(tf.stringify(date)).toMatchInlineSnapshot(`
       "{"$date":"2021-08-19T20:00:00.000Z"}"
     `)
   })
 
-  test('should stringify undefined', () => {
-    expect(defaultTransformer.stringify(undefined)).toMatchInlineSnapshot(
-      `"{"$undefined":0}"`,
-    )
+  it('should stringify undefined', () => {
+    expect(tf.stringify(undefined)).toMatchInlineSnapshot(`"{"$undefined":0}"`)
   })
 
-  test('should stringify object foo="bar"', () => {
-    expect(defaultTransformer.stringify({ foo: 'bar' })).toMatchInlineSnapshot(`
+  it('should stringify object foo="bar"', () => {
+    expect(tf.stringify({ foo: 'bar' })).toMatchInlineSnapshot(`
       "{"foo":"bar"}"
     `)
   })
 
-  test('should stringify object foo=undefined', () => {
-    expect(
-      defaultTransformer.stringify({ foo: undefined }),
-    ).toMatchInlineSnapshot(`"{"foo":{"$undefined":0}}"`)
+  it('should stringify object foo=undefined', () => {
+    expect(tf.stringify({ foo: undefined })).toMatchInlineSnapshot(
+      `"{"foo":{"$undefined":0}}"`,
+    )
   })
 
-  test('should stringify object foo=Date', () => {
+  it('should stringify object foo=Date', () => {
     const date = new Date('2021-08-19T20:00:00.000Z')
-    expect(defaultTransformer.stringify({ foo: date })).toMatchInlineSnapshot(`
+    expect(tf.stringify({ foo: date })).toMatchInlineSnapshot(`
       "{"foo":{"$date":"2021-08-19T20:00:00.000Z"}}"
     `)
   })
+
+  it('should stringify empty FormData', () => {
+    const formData = new FormData()
+    expect(tf.stringify(formData)).toMatchInlineSnapshot(`"{"$formData":{}}"`)
+  })
+
+  it('should stringify FormData with key-value pairs of foo="bar",name="Sean"', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('name', 'Sean')
+    expect(tf.stringify(formData)).toMatchInlineSnapshot(
+      `"{"$formData":{"foo":"bar","name":"Sean"}}"`,
+    )
+  })
 })
 
 describe('transformer.parse', () => {
-  test('should parse dates', () => {
+  it('should parse dates', () => {
     const date = new Date('2021-08-19T20:00:00.000Z')
-    const str = defaultTransformer.stringify(date)
-    expect(defaultTransformer.parse(str)).toEqual(date)
+    const str = tf.stringify(date)
+    expect(tf.parse(str)).toEqual(date)
   })
 
-  test('should parse undefined', () => {
-    const str = defaultTransformer.stringify(undefined)
-    expect(defaultTransformer.parse(str)).toBeUndefined()
+  it('should parse undefined', () => {
+    const str = tf.stringify(undefined)
+    expect(tf.parse(str)).toBeUndefined()
   })
 
-  test('should parse object foo="bar"', () => {
+  it('should parse object foo="bar"', () => {
     const obj = { foo: 'bar' }
-    const str = defaultTransformer.stringify(obj)
-    expect(defaultTransformer.parse(str)).toEqual(obj)
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
   })
 
-  test('should parse object foo=undefined', () => {
+  it('should parse object foo=undefined', () => {
     const obj = { foo: undefined }
-    const str = defaultTransformer.stringify(obj)
-    expect(defaultTransformer.parse(str)).toEqual(obj)
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
   })
 
-  test('should parse object foo=Date', () => {
+  it('should parse object foo=Date', () => {
     const date = new Date('2021-08-19T20:00:00.000Z')
     const obj = { foo: date }
-    const str = defaultTransformer.stringify(obj)
-    expect(defaultTransformer.parse(str)).toEqual(obj)
+    const str = tf.stringify(obj)
+    expect(tf.parse(str)).toEqual(obj)
+  })
+
+  it('should parse empty FormData', () => {
+    const formData = new FormData()
+    const str = tf.stringify(formData)
+    const parsed = tf.parse(str) as FormData
+    expect(parsed).toBeInstanceOf(FormData)
+    expect([...parsed.entries()]).toEqual([])
+  })
+
+  it('should parse FormData with key-value pairs of foo="bar",name="Sean"', () => {
+    const formData = new FormData()
+    formData.append('foo', 'bar')
+    formData.append('name', 'Sean')
+    const str = tf.stringify(formData)
+    const parsed = tf.parse(str) as FormData
+    expect(parsed).toBeInstanceOf(FormData)
+    expect([...parsed.entries()]).toEqual([
+      ['foo', 'bar'],
+      ['name', 'Sean'],
+    ])
   })
 })