Фермент и Jest тестирование компонентов с магазином - PullRequest
Новая
       24

Фермент и Jest тестирование компонентов с магазином

0 голосов
/ 19 марта 2020

Попытка проверить мой компонент React. Содержит условный рендеринг, условие происходит от useSelector. По какой-то причине при тестировании это условие условия является неправильным и отображает неверный контент.

Реагирующий компонент, который я тестирую 

import React, { useState } from 'react';
import { useDispatch, useSelector } from '../../tools/react-redux-hooks';
import { googleLogin, logOut } from '../../store/actions/main';
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import AuthModal from './modals/auth-modal';
import Toolbar from '@material-ui/core/Toolbar';

export default function NavBar() {
  const [authModalOpened, setAuthModalOpened] = useState(false);

  const dispatch = useDispatch();
  const loggedIn = useSelector(state => state.main.loggedIn);

  function handleOpenLoginModal() {
    setAuthModalOpened(true);
  }

  function handleCloseLoginModal() {
    setAuthModalOpened(false);
  }

  function handleLogout() {
    dispatch(logOut());
  }

  function googleAuth() {
    dispatch(googleLogin());
  }

  function renderAuthAction() {
    return (
      <>
        {
          !loggedIn ? (
            <>
              <Button classes={'login'} variant='contained' onClick={handleOpenLoginModal}>Login</Button>
              <AuthModal
                opened={authModalOpened}
                closeModal={handleCloseLoginModal}
                googleAuth={googleAuth}
              />
            </>
          ) : (
            <Button variant='contained' onClick={handleLogout}>Logout</Button>
          )
        }
      </>
    );
  }

  return (
    <AppBar className='header'>
      <Toolbar>
        <div className='toolbar__menu'>
          <div className='toolbar__menu-logo'>
            <Link to='/'>Gapi</Link>
          </div>

          {loggedIn && (
            <ul className='toolbar__menu-items'>
              <li className='toolbar__menu-item'>
                <Link to='/clients'>Clients</Link>
              </li>
            </ul>
          )}
        </div>

        <div className='toolbar__auth'>
          {renderAuthAction()}
        </div>

      </Toolbar>
    </AppBar>
  );
}

Тест 

import React from 'react';
import NavBar from '../../../src/components/ui/navbar';
import * as ReactReduxHooks from '../../../src/tools/react-redux-hooks';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import { BrowserRouter } from 'react-router-dom';
import { createMount } from '@material-ui/core/test-utils';

describe('<Navbar />', function() {
  let store;
  let mount;
  let wrapper;

  beforeEach(function() {
    mount = createMount();

    store = configureStore([thunk])({
      loggedIn: false
    });

    jest
      .spyOn(ReactReduxHooks, 'useSelector')
      .mockImplementation(state => store.getState());

    jest
      .spyOn(ReactReduxHooks, 'useDispatch')
      .mockImplementation(() => store.dispatch);

    wrapper = mount(
      <BrowserRouter>
        <NavBar store={store}/>
      </BrowserRouter>
    );
  });

  afterEach(() => {
    mount.cleanUp();
  });

  test('should render AuthModal component if not logged in', () => {

    const toolbar = wrapper.find('.toolbar__auth');
    const toolbar_items = wrapper.find('.toolbar__menu-items');

    expect(toolbar).toHaveLength(1);
    expect(toolbar_items).toHaveLength(1);
  });

});

реагировать-редукс-хуки. js

import { useDispatch as originalUseDispatch, useSelector as originalUseSelector } from 'react-redux';

export function useSelector(state) {
  return originalUseSelector(state);
}

export function useDispatch() {
  return originalUseDispatch();
}

Прямо сейчас, тест успешно пройден, но должен провалиться, потому что я посылаю loggedIn: false. Условия не работают.

Нужна ваша помощь.

...