tests - jest_enzyme.md

JEST/ENZYME

run test:

npm run test.jest -- -t
npm run test.jest -- -t "appTest"
npm run test.jest -- -t -u

e2e test example

import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import OfferCard from './offerCard.jsx';

Enzyme.configure({adapter: new Adapter()});

const offerCardMockData = {
  0: {
    badge: `Premium`,
    currency: `$`,
    id: `23423`,
    price: 190,
    pricePer: `Night`,
    rating: 4,
    thumbnail: `https://source.unsplash.com/user/hutomoabrianto/260x300`,
    title: `Apartment in 3-star hotel (#6) Long-Stay discount`,
    type: `apartment`
  }
};

// mount - for nested components
// shallow - does not render nested components

describe(`OfferCard_click_End2End`, () => {
  it(`Should test if place title has been clicked & Should test if place plate has been hovered`, () => {

    // create function for testing
    const handleOfferCardTitleClick = jest.fn();
    const handleOfferCardHover = jest.fn();

    const wrapper = shallow(
        <OfferCard
          handleOfferCardTitleClick={handleOfferCardTitleClick}
          handleOfferCardHover={handleOfferCardHover}
          offerCardMockData={offerCardMockData}
        />
    );

    // get the real target
    const targetBtn = wrapper.find(`.place-card__name > a`);
    const placeCard = wrapper.find(`.place-card`);

    // const mockEventPreventDefault = {preventDefault() {}};
    // targetBtn.props().onClick(); // - this will also work

    // simulate click for shallow:
    // targetBtn.simulate(`click`, mockEventPreventDefault);

    targetBtn.simulate(`click`);
    placeCard.simulate(`mouseEnter`);

    // simulate click for mount:
    // targetBtn.simulate(`click`, {preventDefault() {}});

    // long command:
    // expect(handleOfferCardTitleClick.mock.calls.length).toBe(1);

    /* eslint-disable-next-line */ // disable console.log wanring
    console.log(handleOfferCardHover.mock);

    // shortcut:
    expect(handleOfferCardTitleClick).toHaveBeenCalledTimes(1);
    expect(handleOfferCardHover.mock.calls[0][0]).toMatchObject(offerCardMockData[0]);
  });


  // it(`Should test if place plate has been hovered`, () => {

  //   // create function for testing
  //   const handleOfferCardHover = jest.fn();

  //   const wrapper = shallow(
  //       <OfferCard
  //         handleOfferCardHover={handleOfferCardHover}
  //         offerCardMockData={offerCardMockData}
  //       />
  //   );

  //   // get the real target
  //   const placeCard = wrapper.find(`.place-card`);

  //   // simulate click for shallow:
  //   placeCard.simulate(`mouseEnter`);

  //   expect(handleOfferCardHover).toMatchObject(offerCardMockData);
  // });
});

helpful URLs:

• How to test react-router Links with Enzyme? - reactjs