javascript - How can i test a component with setProps() of enzyme - Stack Overflow

admin管理员组

文章数量:1345401

//in my ponent i have 

{this.props.auth.isLoadding && 
   <p className='text-info positionMessage'>Is registring...</p>
}

//in my test i have 

it('should start a new ponent with set props', () => {
const props = {
    auth: {
        isAuth: false,
        isLoadding: false
    }
}
    const wrapper = shallow(<ScreensCreateAccount {...props}/>)

    wrapper.setProps({isLoadding: true})
    //here is code for testing if <p>...</p> appeared. how can i do this?
})

my ponent starts with this.props.auth.isLoadding = false, and when a change it for true, the html too change, adding <p className='text-info positionMessage'>Is registring...</p>. How can i test it using shallow from enzyme?

//in my ponent i have 

{this.props.auth.isLoadding && 
   <p className='text-info positionMessage'>Is registring...</p>
}

//in my test i have 

it('should start a new ponent with set props', () => {
const props = {
    auth: {
        isAuth: false,
        isLoadding: false
    }
}
    const wrapper = shallow(<ScreensCreateAccount {...props}/>)

    wrapper.setProps({isLoadding: true})
    //here is code for testing if <p>...</p> appeared. how can i do this?
})

my ponent starts with this.props.auth.isLoadding = false, and when a change it for true, the html too change, adding <p className='text-info positionMessage'>Is registring...</p>. How can i test it using shallow from enzyme?

• javascript
• reactjs
• jestjs
• enzyme

Share Improve this question Follow edited Jan 29, 2019 at 19:53 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jan 29, 2019 at 13:19 Deborah L. ChristinneDeborah L. Christinne 11111 gold badge11 silver badge77 bronze badges 2

• 1 Have you seen how .text() works in enzyme? airbnb.io/enzyme/docs/api/ShallowWrapper/text.html if necessary, you can use .find() to locate the element you want to test: airbnb.io/enzyme/docs/api/ReactWrapper/find.html – OliverRadini Commented Jan 29, 2019 at 13:23
• @OliverRadini , i need something like wrapper.setProps({isLoadding: true}) expect(wrapper.text()).toEqual("<p className='text-info positionMessage'>Is registring...</p>"), but this doesn't work – Deborah L. Christinne Commented Jan 29, 2019 at 13:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Here is a working example that sticks to your code : https://codesandbox.io/s/r7owz8mykm

In your code you just forgot the auth level in your json for the prop isLoading.

{isLoadding: true}, instead of {auth: {isLoadding: true} }

But be aware that shallow rendering and enzyme may not be the right tool for testing your React ponent. I used it a bit but now I use react-testing-library : https://github./kentcdodds/react-testing-library and I am definitively happy with that. My tests are now more high level and interact with my ponents like a real user will do. I can refactor my ponent without breaking my tests, with enzyme it is, well, not so easy to write this kind of tests.

I really encourage you to at least read this and make your own opinion.

https://blog.kentcdodds./why-i-never-use-shallow-rendering-c08851a68bb7

If you already have some tests with enzyme no problem, you can use both libraries in the same project.

本文标签： javascriptHow can i test a component with setProps() of enzymeStack Overflow