expect(received).toEqual(expected) - error

Question

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

Answer 1

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 and state changes
• Used this.setState() callbacks to keep state 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, and isEmpty 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 the fakeAPI.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 with handle, while passed down methods start with on.
• 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 as enzyme sees it, then you can console.log(wrapper.debug()); inside of your it test.
• You can utilize jest.useFakeTimers() in the beforeEach() function and jest.runAllTimers() in the afterEach() function to simulate setTimeout functions without having to wait for real time to pass.
• Very important: Always include a .catch() after a Promise (an API call). If you don't catch your Promises, then it can crash your app.