zarm/es/use-in-viewport/__tests__/index.test.js

基于 React 的移动端UI库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { act, renderHook } from '@testing-library/react-hooks';
import useInViewport from '../index';
var targetEl = document.createElement('div');
document.body.appendChild(targetEl);
var mockIntersectionObserver = jest.fn().mockReturnValue({
  observe: function observe() {
    return null;
  },
  disconnect: function disconnect() {
    return null;
  }
});
window.IntersectionObserver = mockIntersectionObserver;
describe('useInViewport', function () {
  it('should work when target is in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var _renderHook, result, calls, _calls, onChange, _result$current, inViewport;

    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _renderHook = renderHook(function () {
              return useInViewport(targetEl);
            }), result = _renderHook.result;
            calls = mockIntersectionObserver.mock.calls;
            _calls = _slicedToArray(calls[calls.length - 1], 1), onChange = _calls[0];
            act(function () {
              onChange([{
                targetEl: targetEl,
                isIntersecting: true
              }]);
            });
            _result$current = _slicedToArray(result.current, 1), inViewport = _result$current[0];
            expect(inViewport).toBeTruthy();

          case 6:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  it('should not work when target is null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    var observe;
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            observe = jest.fn();
            mockIntersectionObserver.mockReturnValue({
              observe: observe,
              disconnect: function disconnect() {
                return null;
              }
            });
            renderHook(function () {
              return useInViewport(null);
            });
            expect(observe).toHaveBeenCalledTimes(0);

          case 4:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  it('should disconnect when unmount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
    var disconnect, _renderHook2, unmount;

    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            disconnect = jest.fn();
            mockIntersectionObserver.mockReturnValue({
              observe: function observe() {
                return null;
              },
              disconnect: disconnect
            });
            _renderHook2 = renderHook(function () {
              return useInViewport(targetEl);
            }), unmount = _renderHook2.unmount;
            unmount();
            expect(disconnect).toBeCalled();

          case 5:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  })));
});