ReduxForm is rendered twice when mounted via enzyme

Multi tool use
Multi tool use












0















I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)



I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?



Here is the test:



import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'

describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)

const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})


And PasswordResetContainer looks like this:



import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'

export const validate = (values) => {
const errors = {}

if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}

export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))


Output from test is following:



PasswordResetContainer › should render only one ReduxForm

expect(received).toEqual(expected)

Expected value to equal:
1
Received:
2


Edit (partial solution found):



When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.

Why do I need to do such a magic?










share|improve this question

























  • Console log run in test prints this pastebin.com/vHn5Gy6t

    – Veldrin
    Dec 29 '18 at 22:04


















0















I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)



I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?



Here is the test:



import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'

describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)

const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})


And PasswordResetContainer looks like this:



import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'

export const validate = (values) => {
const errors = {}

if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}

export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))


Output from test is following:



PasswordResetContainer › should render only one ReduxForm

expect(received).toEqual(expected)

Expected value to equal:
1
Received:
2


Edit (partial solution found):



When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.

Why do I need to do such a magic?










share|improve this question

























  • Console log run in test prints this pastebin.com/vHn5Gy6t

    – Veldrin
    Dec 29 '18 at 22:04
















0












0








0








I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)



I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?



Here is the test:



import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'

describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)

const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})


And PasswordResetContainer looks like this:



import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'

export const validate = (values) => {
const errors = {}

if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}

export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))


Output from test is following:



PasswordResetContainer › should render only one ReduxForm

expect(received).toEqual(expected)

Expected value to equal:
1
Received:
2


Edit (partial solution found):



When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.

Why do I need to do such a magic?










share|improve this question
















I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)



I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?



Here is the test:



import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'

describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)

const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})


And PasswordResetContainer looks like this:



import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'

export const validate = (values) => {
const errors = {}

if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}

export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))


Output from test is following:



PasswordResetContainer › should render only one ReduxForm

expect(received).toEqual(expected)

Expected value to equal:
1
Received:
2


Edit (partial solution found):



When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.

Why do I need to do such a magic?







react-redux enzyme redux-form






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 30 '18 at 9:54







Veldrin

















asked Dec 29 '18 at 22:03









VeldrinVeldrin

13




13













  • Console log run in test prints this pastebin.com/vHn5Gy6t

    – Veldrin
    Dec 29 '18 at 22:04





















  • Console log run in test prints this pastebin.com/vHn5Gy6t

    – Veldrin
    Dec 29 '18 at 22:04



















Console log run in test prints this pastebin.com/vHn5Gy6t

– Veldrin
Dec 29 '18 at 22:04







Console log run in test prints this pastebin.com/vHn5Gy6t

– Veldrin
Dec 29 '18 at 22:04














1 Answer
1






active

oldest

votes


















0














A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that



wrapper.find('ReduxForm')


looks like:



wrapper.find('ReduxForm').first()





share|improve this answer
























  • Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

    – Veldrin
    Jan 6 at 9:41











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53973689%2freduxform-is-rendered-twice-when-mounted-via-enzyme%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that



wrapper.find('ReduxForm')


looks like:



wrapper.find('ReduxForm').first()





share|improve this answer
























  • Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

    – Veldrin
    Jan 6 at 9:41
















0














A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that



wrapper.find('ReduxForm')


looks like:



wrapper.find('ReduxForm').first()





share|improve this answer
























  • Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

    – Veldrin
    Jan 6 at 9:41














0












0








0







A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that



wrapper.find('ReduxForm')


looks like:



wrapper.find('ReduxForm').first()





share|improve this answer













A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that



wrapper.find('ReduxForm')


looks like:



wrapper.find('ReduxForm').first()






share|improve this answer












share|improve this answer



share|improve this answer










answered Dec 31 '18 at 10:48









cnacodecnacode

31




31













  • Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

    – Veldrin
    Jan 6 at 9:41



















  • Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

    – Veldrin
    Jan 6 at 9:41

















Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

– Veldrin
Jan 6 at 9:41





Yeah, but that can hide problems. What if someone else add a code to create two ReduxForms (4 would be generated) ?

– Veldrin
Jan 6 at 9:41


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53973689%2freduxform-is-rendered-twice-when-mounted-via-enzyme%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







2,dAz2BPmOqZHjoF3bfo FPqPIx 1clx4dkc,fkUVQSJQhuWx77WgkgLz
CMYY4RJr7 JCbDiglx0 x41

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas