fix: Fix withRouter (#221)

src/createWithRouter.js

@@ -6,20 +6,22 @@ export default function createWithRouter({
   getFound = ({ found }) => found,
   matchKey = 'resolvedMatch',
 }) {
-  return injectRouterProp(
-    connect(
-      state => ({ match: getFound(state)[matchKey] }),
-      null,
-      (stateProps, dispatchProps, ownProps) => ({
-        ...ownProps,
-        ...stateProps,
-        // We don't want dispatch here.
-      }),
-      // This needs to be pure, to avoid rerendering on changes to other matchKey
-      // values in the store.
-      {
-        getDisplayName: name => `withRouter(${name})`,
-      },
-    ),
-  );
+  return function withRouter(Component) {
+    return injectRouterProp(
+      connect(
+        state => ({ match: getFound(state)[matchKey] }),
+        null,
+        (stateProps, dispatchProps, ownProps) => ({
+          ...ownProps,
+          ...stateProps,
+          // We don't want dispatch here.
+        }),
+        // This needs to be pure, to avoid rerendering on changes to other
+        // matchKey values in the store.
+        {
+          getDisplayName: name => `withRouter(${name})`,
+        },
+      )(Component),
+    );
+  };
 }

test/BaseLink.test.js

@@ -26,26 +26,6 @@ describe('<BaseLink>', () => {
     };
   });
 
-  it('should render <a> by default', () => {
-    const link = mount(<BaseLink to="/" match={{}} router={router} />);
-
-    expect(link.find('a')).toHaveLength(1);
-  });
-
-  it('should support a custom Component', () => {
-    const link = mount(
-      <BaseLink
-        to="/"
-        match={{}}
-        router={router}
-        Component={CustomComponent}
-      />,
-    );
-
-    expect(link.find('a')).toHaveLength(0);
-    expect(link.find(CustomComponent)).toHaveLength(1);
-  });
-
   describe('when clicked', () => {
     it('should call a custom click handler', () => {
       const handleClick = jest.fn();

test/ElementsRenderer.test.js

@@ -4,25 +4,23 @@ import React from 'react';
 import ElementsRenderer from '../src/ElementsRenderer';
 
 describe('<ElementsRenderer>', () => {
-  it('should render null when no item in elements', () => {
-    const elements = [];
-    const wrapper = mount(<ElementsRenderer elements={elements} />);
+  it('should render null when there are no elements', () => {
+    const wrapper = mount(<ElementsRenderer elements={[]} />);
     expect(wrapper.html()).toBe(null);
   });
 
-  it('should render element', () => {
-    const elements = [<div />];
-    const wrapper = mount(<ElementsRenderer elements={elements} />);
+  it('should render a single element', () => {
+    const wrapper = mount(<ElementsRenderer elements={[<div />]} />);
     expect(wrapper.find('div')).toHaveLength(1);
   });
 
-  it('should render elements with nested structure', () => {
+  it('should render nested elements', () => {
     const Parent = ({ children }) => <div className="parent">{children}</div>;
     const Child = () => <div className="child" />;
 
-    const elements = [<Parent />, <Child />];
-
-    const wrapper = mount(<ElementsRenderer elements={elements} />);
+    const wrapper = mount(
+      <ElementsRenderer elements={[<Parent />, <Child />]} />,
+    );
 
     const parent = wrapper.find(Parent);
     expect(parent).toHaveLength(1);

test/Link.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Link from '../src/Link';
+import { mountWithRouter } from './helpers';
+
+const CustomComponent = () => <div />;
+
+describe('<Link>', () => {
+  it('should render <a> by default', async () => {
+    const link = await mountWithRouter(<Link to="/" />);
+    expect(link.find('a')).toHaveLength(1);
+  });
+
+  it('should support a custom component', async () => {
+    const link = await mountWithRouter(
+      <Link Component={CustomComponent} to="/" />,
+    );
+    expect(link.find('a')).toHaveLength(0);
+    expect(link.find(CustomComponent)).toHaveLength(1);
+  });
+
+  describe('active state', () => {
+    it('should set activeClassName when active', async () => {
+      const link = await mountWithRouter(
+        <Link to="/" activeClassName="active" />,
+      );
+      expect(link.find('a').hasClass('active')).toBe(true);
+    });
+
+    it('should not set activeClassName when inactive', async () => {
+      const link = await mountWithRouter(
+        <Link to="/foo" activeClassName="active" />,
+      );
+      expect(link.find('a').hasClass('active')).toBe(false);
+    });
+
+    it('should be active on child routes by default', async () => {
+      const link = await mountWithRouter(
+        <Link to="/" activeClassName="active" />,
+        { url: '/foo' },
+      );
+      expect(link.find('a').hasClass('active')).toBe(true);
+    });
+
+    it('should not be active on child routes when exact', async () => {
+      const link = await mountWithRouter(
+        <Link to="/" activeClassName="active" exact />,
+        { url: '/foo' },
+      );
+      expect(link.find('a').hasClass('active')).toBe(false);
+    });
+  });
+});

test/helpers.js

@@ -1,4 +1,8 @@
+import { mount } from 'enzyme';
+
+import createRender from '../src/createRender';
 import resolver from '../src/resolver';
+import getFarceResult from '../src/server/getFarceResult';
 
 export class InstrumentedResolver {
   constructor() {
@@ -18,3 +22,25 @@ export class InstrumentedResolver {
     resolveDone();
   }
 }
+
+export async function mountFarceResult({
+  url = '/',
+  render = createRender({}),
+  ...options
+}) {
+  const { element } = await getFarceResult({ ...options, url, render });
+  return mount(element);
+}
+
+export function mountWithRouter(element, options = {}) {
+  return mountFarceResult({
+    ...options,
+
+    routeConfig: [
+      {
+        path: '*',
+        render: () => element,
+      },
+    ],
+  });
+}