expect(received).toEqual(expected) - error
I've spent some time integrating your code into a sandbox. There are quite a few changes to your code, which I've listed below. I've also included some tests that have been filled in and some that are not. What you should do is spend some time familiarizing yourself with these changes so that you can fill in the rest of tests in containers/LOAs/__tests__
on your own.
Even though I wrote an integrated test for the LOAs
container, I encourage you to write a unit test for the smaller components
, so that you can practice mocking prop
functions, checking if they're being called, and making sure the component functions as expected. Even though it'll be redundant, it'll help you understand the flow, what to test, and how to test (for unit tests, you'll want to use the shallowWrap
instead of the mountWrap
function -- or don't use them and use the provided shallow
and mount
functions offered by enzyme
... up to you).
Working example: https://codesandbox.io/s/p3ro0615nm
Changes:
- Created a container component that handles all
UI
andstate
changes - Used
this.setState()
callbacks to keepstate
and secondary actions synchronous. Just as important, this also reduces unwanted component flickering. - Used conditional rendering with the use a ternary operator
- Used lodash's
filter
,map
, andisEmpty
functions (they're convenient and I prefer them over native JS functions) - Mocked 2 API calls (noticed that I've used
setTimeout
, as this will affect your tests). In thefakeAPI.post
function, I added a fake password to check against, therefore, the supplied password must be 12345! - Added the ability to select and unselect LOAs. If desired, you can simplify all of that with checkboxes.
- Class
methods
start withhandle
, while passed down methods start withon
. - Broke down
components/LOAModal/LOAModal.js
into smaller/reuseable components to make it easier to read - Added
PropType
checking to make sure props were consistent during initial declaration and across components.
Notes:
- A major part of testing is understanding what's happening behind the scenes, so take the time to read the documentation; and, if necessary, do smaller/simpler projects to help familiarize yourself with how React works.
- When testing, if you need to see the
DOM
asenzyme
sees it, then you canconsole.log(wrapper.debug());
inside of yourit
test. - You can utilize
jest.useFakeTimers()
in thebeforeEach()
function andjest.runAllTimers()
in theafterEach()
function to simulatesetTimeout
functions without having to wait for real time to pass. -
Very important: Always include a
.catch()
after aPromise
(an API call). If you don'tcatch
your Promises, then it can crash your app.
userr2591
Updated on June 04, 2022Comments
-
userr2591 almost 2 years
I am trying to run an unit test for React JS - using jest / enzyme.
The test is failing at the moment.Not really sure why, maybe i am not calling the expect(wrapper.find) correctly. Here is part of my test:
File.test.js it('renders modal when open flag is true', () => { const props = { isOpen: true }; const wrapper = mount( <div id="root"> <Component {...props} /> </div> ); wrapper.update(); expect(toJson(wrapper)).toMatchSnapshot(); expect(wrapper.find('.loa-download-header').exists()).toEqual(true); expect(wrapper.text()).toContain(' Please enter a password.'); }); });
Here is part of File.js Shows a piece of the code that I am trying to test as an example.
render() { return ( <Modal <div title="Close Window" className="add-custom-field-close" onClick={() => {this.closeModal()}}><FontAwesome name='xbutton' className='fa-times' /></div> </div> </div> <div className='loa-download-header-wrapper'> <div className='loa-download-header'> Please enter a password. </div>
Error: expect(received).toEqual(expected)
Expected value to equal: true Received: false
Any corrections on the code would be extremely helpful Thanks
-
MadTech about 5 yearsdid you tried removing space before Please "expect(wrapper.text()).toContain(' Please enter a password.');"?
-
userr2591 about 5 years@MadTech the error is referring to this line : expect(wrapper.find('loa-download-header').exists()).toEqual(true); and I did remove the space - I still get an error
-
Chotala Paresh about 5 yearsyou can try to debig it
node --inspect-brk node_modules/.bin/jest --runInBand
jestjs.io/docs/en/troubleshooting -
userr2591 about 5 years@ChotalaParesh does the code look right to you ?
-
-
userr2591 about 5 yearsthank you very much. I will definitely take a look what you have done. Do you offer tutoring ?
-
Matt Carlotta about 5 yearsI do not. However, if you're willing to invest some time and a little bit of money, then I'd suggest investing in this online course: udemy.com/react-2nd-edition