[react] unit-test

[gloriaJun]

testSetup

// mock for crypto
function mockCrypto() {
  delete window.crypto;
  global.window.crypto = {
    subtle: {
      generateKey: jest.fn(),
    },
  };
}

// setup for test
mockCrypto();

testUtility

import React from 'react';
import { render as testingLibraryRender } from '@testing-library/react';
// import { renderHook as testingLibraryRenderHook } from '@testing-library/react-hooks';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { Router } from 'react-router';
// import { runSaga } from 'redux-saga';

import history from '@utils/HistoryUtils';

const mockStore = configureStore({});

// re-export everything
// eslint-disable-next-line import/export
export * from '@testing-library/react';
// export * from '@testing-library/react-hooks';

// eslint-disable-next-line import/export
export const renderWithRedux = (component, { initState = {}, route = '/' }) => {
  const store = mockStore({ loading: {}, ...initState });
  const Wrapper = ({ children }) => (
    <Router history={history}>
      <Provider store={store}>
        {children}
        <div id="layer" />
      </Provider>
    </Router>
  );

  // move to route
  history.push(route);

  return {
    ...testingLibraryRender(component, { wrapper: Wrapper }),
    store,
    history,
  };
};

// export const renderHook = (component, options) => {
//   return testingLibraryRenderHook(component, { ...options });
// };

// export async function recordSaga(saga, initialAction) {
//   const dispatched = [];
//
//   await runSaga(
//     {
//       dispatch: action => dispatched.push(action),
//     },
//     saga,
//     initialAction
//   ).done;
//
//   return dispatched;
// }

example

import React from 'react';

import { renderWithRedux, fireEvent, screen, waitFor } from '@tests/unit/testUtility';
import CardDescription from '@components/debitCard/issuance/CardDescription';
import i18n, { SUPPORT_LOCALES } from '@utils/i18n';
import Routes from '@common/RouteVariables';

import productData from '@tests/mockdata/productData';
import { list as accountList } from '@tests/mockdata/account';

const ROUTES_CARD_ISSUE = Routes.CARD.ISSUE;

const defaultStore = {
  product: { products: productData['PRODUCT_DEBIT_CARD'] },
};

describe('[Debit Card] - Issuance', () => {
  const savingAccountList = [...accountList.basicSavingAccounts, ...accountList.linkedSavingAccounts];
  const descriptionViewStore = {
    ...defaultStore,
    account: { list: savingAccountList },
    debitCard: { issue: {} },
  };

  // execute before each test script running
  beforeEach(() => {
    i18n.setLanguage(SUPPORT_LOCALES.EN);
  });

  describe('CardDescription', () => {
    it('Type A : should be not display SelectLinkedAccount layer', async () => {
      // given
      renderWithRedux(<CardDescription />, {
        initState: descriptionViewStore,
        route: `${ROUTES_CARD_ISSUE.INDEX}?accountId=${accountList.basicSavingAccounts[0].accountId}`,
      });

      // when
      const button = screen.getByTestId('discover__btn');
      fireEvent.click(button.querySelector('.btn'));

      // then
      await waitFor(() => {
        const ly = screen.queryByRole('ly-acc');
        expect(ly).toBeNull();
      });

      // await waitFor(() => {
      //   expect(store.getState().debitCard.issue.accountId).toBe(accountList.basicSavingAccounts[0].accountId);
      // });
      //
      // const pushSpy = jest.spyOn(history, 'push');
      // await waitFor(() => expect(pushSpy).toHaveBeenCalledTimes(1));
      // console.log(history.location.pathname, store.getState());
    });

    it('Type B : should be render saving account list also included linked account', async () => {
      // given
      renderWithRedux(<CardDescription />, {
        initState: descriptionViewStore,
        route: ROUTES_CARD_ISSUE.INDEX,
      });

      // when
      const button = screen.getByTestId('discover__btn');
      fireEvent.click(button.querySelector('.btn'));

      // then
      await waitFor(() => {
        const ly = screen.getByRole('ly-acc');
        expect(ly.querySelectorAll('.acc-lst__item')).toHaveLength(savingAccountList.length);
      });
    });
  });
});