Ссылка на подкомпонент дает ошибку

Question

Это метод, который я использую для всех вызовов выборки.

static sendJsonRequest(address, action, requestType, jsonData, queryParams, successCallback, errorCallback,showLoader,httpErrorCallback, serverUrl){
    localStorage.setItem("_lastUpdatedTime", Date.now());

    ProjectStore.setLodingCount(ProjectStore.getLodingCount() + 1);
    if(showLoader){
      BusyLoader.showLoader();
    }
    var finalURL = Client.getServiceURL( address, action, queryParams, serverUrl);
    fetch(finalURL, {
      method: requestType,
      headers: {
        'content-type': 'application/json; charset=utf-8',
        'Authorization': 'Bearer ' + localStorage.getItem("access_token"),
        'pragma': 'no-cache',
        'cache-control': 'no-cache'
      },
      body: String(requestType).toLowerCase() === "get" ? undefined : JSON.stringify(jsonData)
    })
    .then(function(response) {
      if (!response.ok) {
          throw Error(response.statusText);
      }
      return response.json();
    })
    .then(function(jsonObj) {
      if(ProjectStore.getLodingCount() > 0){
        ProjectStore.setLodingCount(ProjectStore.getLodingCount() - 1);
      }
      if(ProjectStore.getLodingCount() === 0){
        BusyLoader.hideLoader();
      }
      successCallback(jsonObj);
    })
    .catch(function(err) {
      if(ProjectStore.getLodingCount() > 0){
        ProjectStore.setLodingCount(ProjectStore.getLodingCount() - 1);
      }
      if(ProjectStore.getLodingCount() === 0){
        BusyLoader.hideLoader();
      }
        errorCallback(err);
    });
  }

Я пытаюсь написать контрольный пример для того же самого, каждый раз, когда я пишу контрольный пример, я получаю сообщение об ошибке:

BusyLoader.objBusyLoader.setState is not a function

Это реализация BusyLoader компонента

import React, {Component} from 'react';
import Loading from 'react-loading';
export default class BusyLoader extends Component {
        static objBusyLoader = {};
        constructor(props) {
            super(props);
            BusyLoader.objBusyLoader = this;
            this.state = {
                    busyIcon:false,
                    color:"#0876b7",
                    width:100,
                    height:100
            };
        }

        static showLoader(){
            BusyLoader.objBusyLoader.setState({
                busyIcon:true
            });
    }

    static hideLoader(){
        BusyLoader.objBusyLoader.setState({
            busyIcon:false
        });
    }

        render(){
        var absStyle = {
            position: "absolute",
            top: "50%",
            left: "50%",
            marginTop: "-50px",
            marginLeft: "-100px",
            zIndex : 2017
        }

        return(<div className="overlay" style={{display : this.state.busyIcon ? "" : "none"}}>
                <div  style={absStyle}>
                    <Loading type='spinningBubbles' color={this.state.color} width={this.state.width}  height={this.state.height}/>
                </div>
            </div>);
    }
}

Это тестовый пример, который я пытаюсь написать

import React from 'react';
import {shallow} from 'enzyme';
import Client from '../Client.jsx';

describe('<Client />', () => {
  it('should fetch data from service', () => {
    const mockData = {  goodResponse: 'yes' };
    jest.spyOn(window, 'fetch').mockImplementation(() => Promise.resolve(mockData));
    Client.sendJsonRequest();
  });
});

Может кто-нибудь сказать, пожалуйста,выпустите здесь и предложите мне написать кейс для того же.

Answer 1

Вы вызываете статический метод (showLoader), который пытается вызвать objBusyLoader.setState.Однако objBusyLoader назначается в конструкторе.Это довольно утомительно, потому что наличие статического метода, который обращается к «переменным экземпляра», немного «скручено».

Для выполнения этой работы необходимо создать хотя бы один экземпляр BusyLoader:

import React from 'react';
import {shallow} from 'enzyme';
import Client from '../Client.jsx';
import BusyLoader from '../BusyLoader.jsx';

describe('<Client />', () => {
  beforeAll(() => {
    // instantiate the BusyLoader class once, this will assign BusyLoader.objBusyLoader
    shallow(<BusyLoader />);
  })

  it('should fetch data from service', () => {
    const mockData = {  goodResponse: 'yes' };
    jest.spyOn(window, 'fetch').mockImplementation(() => 
      Promise.resolve(mockData));
    Client.sendJsonRequest();
  });
});

Тем не менее, вам обязательно стоит пересмотреть свой дизайн, так как он имеет "неприятный запах".