Jest testing, Как написать тест для метода, который включает в себя реакционные хуки? - PullRequest
Новая
       44

Jest testing, Как написать тест для метода, который включает в себя реакционные хуки?

1 голос
/ 22 апреля 2020

У меня есть простой компонент аутентификации. Мне нужно знать, каков наилучший подход к тестированию метода isLogin. Я храню информацию о пользователе в redux-store и всякий раз, когда я вызываю этот метод, он проверяет store и возвращает true или false. вот компонент: 

import React from 'react';
import type { Node } from 'react';
import { useSelector } from 'react-redux';
import { Render } from '..';

type componentProps = {
  fallback?: any,
  children: Array<Node> | Node,
};

/* A method for checking if user is login or not */
const isLogin = () => {
  const token = useSelector(state => state.User.token);

  return !!token;
};

const Authentication = ({ fallback, children }: componentProps) => {
  const token = useSelector(state => state.User.token);
  return [
    <Render key="item-auth-children" condition={token}>
      {children}
    </Render>,
    <Render key="item-auth-fallback" condition={!token && fallback}>
      {fallback}
    </Render>,
  ];
};

Authentication.defaultProps = {
  fallback: null,
};

Authentication.isLogin = isLogin;

export default Authentication;

Мне нужно написать тест с jest-ферментом для проверки метода isLogin.

Я сделал что-то подобное, но это не имеет никакого смысла: 

import React from 'react';
import { mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { Authentication } from '..';

const middleWares = [];
const mockStore = configureStore(middleWares);

const initialState = {
  User: {
    loading: false,
    token: '',
    userType: 'client',
    error: {},
  },
};
const store = mockStore(initialState);

describe('isLogin Method test', () => {
  it('should checks user login state correctly', function() {
    const wrapper = mount(
      <Provider store={store}>{Authentication.isLogin()}</Provider>,
    );
  });
});
...