@@ -2,7 +2,7 @@ import React from 'react'
22import { render , fireEvent , cleanup } from '@testing-library/react'
33import '@testing-library/jest-dom/extend-expect'
44import arrayMutators from 'final-form-arrays'
5- import { ErrorBoundary , Toggle } from './testUtils'
5+ import { ErrorBoundary , Toggle , wrapWith } from './testUtils'
66import { Form , Field } from 'react-final-form'
77import { FieldArray , version } from '.'
88
@@ -129,7 +129,7 @@ describe('FieldArray', () => {
129129 const renderArray = jest.fn(() => <div />)
130130 class Container extends React.Component {
131131 state = { name: 'dogs' }
132-
132+
133133 render() {
134134 return (
135135 <form>
@@ -149,10 +149,10 @@ describe('FieldArray', () => {
149149 expect(renderArray).toHaveBeenCalled()
150150 expect(renderArray).toHaveBeenCalledTimes(1)
151151 expect(renderArray.mock.calls[0][0].value).toBeUndefined()
152-
152+
153153 const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
154154 TestUtils.Simulate.click(button)
155-
155+
156156 expect(renderArray).toHaveBeenCalledTimes(2)
157157 expect(renderArray.mock.calls[1][0].value).toBeUndefined()
158158 })
@@ -445,6 +445,60 @@ describe('FieldArray', () => {
445445 expect ( queryByTestId ( 'names[1]' ) ) . not . toBe ( null )
446446 } )
447447
448+ it ( 'should not re-render Field when subscription is empty object' , ( ) => {
449+ const nameFieldRender = jest . fn ( )
450+ const surnameFieldRender = jest . fn ( )
451+ 452+ const { getByTestId } = render (
453+ < Form
454+ onSubmit = { onSubmitMock }
455+ mutators = { arrayMutators }
456+ subscription = { { } }
457+ initialValues = { {
458+ names : [ { id : 1 , name : 'John' , surname : 'Doe' } ]
459+ } }
460+ >
461+ { ( { handleSubmit } ) => (
462+ < form onSubmit = { handleSubmit } data-testid = "form" >
463+ < FieldArray name = "names" subscription = { { } } >
464+ { ( { fields } ) =>
465+ fields . map ( field => {
466+ return (
467+ < div key = { `${ field } } >
468+ < Field name = { `${ field } } >
469+ { wrapWith ( nameFieldRender , ( { input } ) => (
470+ < input data-testid = { `${ field } } { ...input } />
471+ ) ) }
472+ </ Field >
473+ < Field name = { `${ field } } >
474+ { wrapWith ( surnameFieldRender , ( { input } ) => (
475+ < input data-testid = { `${ field } } { ...input } />
476+ ) ) }
477+ </ Field >
478+ </ div >
479+ )
480+ } )
481+ }
482+ </ FieldArray >
483+ </ form >
484+ ) }
485+ </ Form >
486+ )
487+ 488+ fireEvent . change ( getByTestId ( 'names[0].name' ) , {
489+ target : { value : 'Sue' }
490+ } )
491+ expect ( getByTestId ( 'names[0].name' ) . value ) . toBe ( 'Sue' )
492+ 493+ fireEvent . change ( getByTestId ( 'names[0].name' ) , {
494+ target : { value : 'Paul' }
495+ } )
496+ expect ( getByTestId ( 'names[0].name' ) . value ) . toBe ( 'Paul' )
497+ 498+ expect ( nameFieldRender ) . toHaveBeenCalledTimes ( 3 )
499+ expect ( surnameFieldRender ) . toHaveBeenCalledTimes ( 1 )
500+ } )
501+ 448502 it ( 'should allow Fields to be rendered for complex objects' , ( ) => {
449503 const onSubmit = jest . fn ( )
450504 const { getByTestId, getByText, queryByTestId } = render (
0 commit comments