nav-link-with-prop/es/index.test.js

React Router NavLink that uses an active prop rather than css class.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import styled from 'styled-components';
import { MemoryRouter as Router, Link } from 'react-router-dom';
import renderer from 'react-test-renderer';
import NavLinkWithProp from '.';
import 'jest-styled-components';
describe('NavLinkWithProp', function () {
  it('renders a styled-component without an active prop', function () {
    var MyAnchor = styled(function (_ref) {
      var _ref$as = _ref.as,
          T = _ref$as === void 0 ? 'a' : _ref$as,
          props = _objectWithoutPropertiesLoose(_ref, ["as"]);

      return React.createElement(T, props);
    })({
      textDecoration: 'blink',
      color: 'blue'
    }, function (_ref2) {
      var active = _ref2.active;
      return active && {
        color: 'red'
      };
    });

    var MyLink = function MyLink(_ref3) {
      var children = _ref3.children,
          props = _objectWithoutPropertiesLoose(_ref3, ["children"]);

      return React.createElement(NavLinkWithProp, props, function (innerProps) {
        return React.createElement(MyAnchor, _extends({
          as: Link
        }, innerProps), children);
      });
    };

    var MyTest = function MyTest() {
      return React.createElement(Router, null, React.createElement(MyLink, {
        to: "/somewhere"
      }, "My Link"));
    };

    var tree = renderer.create(React.createElement(MyTest, null)).toJSON();
    expect(tree).toHaveStyleRule('color', 'blue');
    expect(tree.props.href === '/somewhere');
    expect(tree.props.active === false);
    expect(tree.props.children === 'My Link');
  });
  it('renders a styled-component with an active prop', function () {
    var MyAnchor = styled(function (_ref4) {
      var _ref4$as = _ref4.as,
          T = _ref4$as === void 0 ? 'a' : _ref4$as,
          props = _objectWithoutPropertiesLoose(_ref4, ["as"]);

      return React.createElement(T, props);
    })({
      textDecoration: 'blink',
      color: 'blue'
    }, function (_ref5) {
      var active = _ref5.active;
      return active && {
        color: 'red'
      };
    });

    var MyLink = function MyLink(_ref6) {
      var children = _ref6.children,
          props = _objectWithoutPropertiesLoose(_ref6, ["children"]);

      return React.createElement(NavLinkWithProp, props, function (innerProps) {
        return React.createElement(MyAnchor, _extends({
          as: Link
        }, innerProps), children);
      });
    };

    var MyTest = function MyTest() {
      return React.createElement(Router, null, React.createElement(MyLink, {
        to: "/"
      }, "My Link"));
    };

    var tree = renderer.create(React.createElement(MyTest, null)).toJSON();
    expect(tree).toHaveStyleRule('color', 'red');
    expect(tree.props.href === '/');
    expect(tree.props.active === true);
    expect(tree.props.children === 'My Link');
  });
}); // TODO:
// - test for exact prop
// - test for both emotion and styled-components
// - asNavLink hof hoc, here to begin with then separate repo
//# sourceMappingURL=index.test.js.map