diff --git a/examples/react-router/basic/app.js b/examples/react-router/basic/app.js
index c83807b..96bd7e6 100644
--- a/examples/react-router/basic/app.js
+++ b/examples/react-router/basic/app.js
@@ -28,14 +28,20 @@ class App extends Component {
return (
- - Home
- - Async Page View Track
+ -
+ Home
+
+ -
+ Async Page View Track
+
-
Async Page View Track with query param
- - Manual Page View Track
+ -
+ Manual Page View Track
+
-
Page View Track with params
diff --git a/examples/react-router/basic/manual-page-view.js b/examples/react-router/basic/manual-page-view.js
index 8060bcd..921c868 100644
--- a/examples/react-router/basic/manual-page-view.js
+++ b/examples/react-router/basic/manual-page-view.js
@@ -1,10 +1,11 @@
import React from "react";
-import exposeMetrics from "react-metrics"; // eslint-disable-line import/no-unresolved
+import {exposeMetrics, PropTypes as MetricsPropTypes} from "react-metrics"; // eslint-disable-line import/no-unresolved
import PropTypes from "prop-types";
-@exposeMetrics class ManualPageView extends React.Component {
+@exposeMetrics
+class ManualPageView extends React.Component {
static contextTypes = {
- metrics: PropTypes.metrics
+ metrics: MetricsPropTypes.metrics
};
static propTypes = {
diff --git a/package.json b/package.json
index 3cb474f..b3d6adf 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
"eslint-plugin-react": "^7.1.0",
"estraverse": "4.2.0",
"estraverse-fb": "1.3.1",
- "history": "^2.0.0",
+ "history": "3.2.0",
"isparta-loader": "^2.0.0",
"json-loader": "^0.5.3",
"karma": "^0.13.10",
@@ -86,17 +86,21 @@
"path-to-regexp": "^1.2.1",
"prettier": "^1.3.1",
"prop-types": "^15.5.10",
- "react": "^15.0.1",
- "react-addons-test-utils": "^15.0.1",
- "react-dom": "^15.0.1",
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0",
"react-redux": "^4.4.5",
- "react-router": "^2.0.0",
+ "react-router": "3.2.0",
"redux": "^3.3.1",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.12.0"
},
+ "peerDependencies": {
+ "prop-types": "^15.5.10",
+ "react": "^15.0.1 || ^16.2.0",
+ "react-dom": "^15.0.1 || ^16.2.0"
+ },
"scripts": {
"commit": "git-cz",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
diff --git a/src/react/metrics.js b/src/react/metrics.js
index 7162a39..89f6a56 100644
--- a/src/react/metrics.js
+++ b/src/react/metrics.js
@@ -23,6 +23,7 @@ export default function metrics(metricsOrConfig, options = {}) {
const getNewRouteState = options.getRouteState || getRouteState;
const findNewRouteComponent =
options.findRouteComponent || findRouteComponent;
+
const metricsInstance = isMetrics(metricsOrConfig)
? metricsOrConfig
: createMetrics(metricsOrConfig);
@@ -147,6 +148,7 @@ export default function metrics(metricsOrConfig, options = {}) {
autoTrackPageView &&
!shouldSuppress
) {
+
invariant(
typeof metricsInst.api.pageView === "function",
"react-metrics: 'pageView' api needs to be defined for automatic page view tracking."
diff --git a/test/ReactMetrics/exposeMetrics.spec.js b/test/ReactMetrics/exposeMetrics.spec.js
index 735b331..3972578 100644
--- a/test/ReactMetrics/exposeMetrics.spec.js
+++ b/test/ReactMetrics/exposeMetrics.spec.js
@@ -1,8 +1,7 @@
/* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks */
import React from "react";
import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
import metrics from "../../src/react/metrics";
import exposeMetrics, {
getMountedInstances
@@ -77,7 +76,8 @@ describe("exposeMetrics", () => {
}
}
- @exposeMetrics class Page extends React.Component {
+ @exposeMetrics
+ class Page extends React.Component {
static displayName = "Page";
static willTrackPageView() {
@@ -88,17 +88,21 @@ describe("exposeMetrics", () => {
render() {
return Page
;
}
- }
+ };
+
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
ReactDOM.render(
-
+
,
node,
function() {
- this.history.pushState(null, "/page/1");
+ history.push("/page/1");
}
);
});
@@ -123,21 +127,26 @@ describe("exposeMetrics", () => {
}
}
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
ReactDOM.render(
-
+
,
node,
function() {
- this.history.pushState(null, "/page/1");
+ history.push("/page/1");
}
);
});
it("should register itself to a registry when mounting, unregister itself from a registry when unmounting", done => {
- @exposeMetrics class Application extends React.Component {
+ @exposeMetrics
+ class Application extends React.Component {
render() {
return Application
;
}
@@ -146,9 +155,13 @@ describe("exposeMetrics", () => {
ReactDOM.render(, node, () => {
const registry = getMountedInstances();
expect(registry).to.have.length(1);
- ReactDOM.unmountComponentAtNode(node);
- expect(registry).to.have.length(0);
- done();
+ const didReturn = ReactDOM.unmountComponentAtNode(node);
+ expect(didReturn).to.equal(true);
+ setTimeout(() => {
+ expect(registry).to.have.length(0);
+ done();
+ }, 1);
+
});
});
});
diff --git a/test/ReactMetrics/metrics.spec.js b/test/ReactMetrics/metrics.spec.js
index 06d5950..6b449e6 100644
--- a/test/ReactMetrics/metrics.spec.js
+++ b/test/ReactMetrics/metrics.spec.js
@@ -1,10 +1,9 @@
/* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks, jsx-a11y/href-no-hash */
import React from "react";
import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import ReactTestUtils from "react-dom/test-utils";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
import execSteps from "../execSteps";
-import ReactTestUtils from "react-addons-test-utils";
import metrics from "../../src/react/metrics";
import createMetrics, {isMetrics, Metrics} from "../../src/core/createMetrics";
import exposeMetrics, {
@@ -149,19 +148,26 @@ describe("metrics", () => {
return metricsMock;
});
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
const steps = [
- function() {
+ () => {
expect(pageView.calledOnce).to.be.false;
- this.history.pushState(null, "/page");
+ history.push("/page");
},
- function() {
- expect(pageView.calledOnce).to.be.true;
- stub.restore();
- pageView.restore();
- done();
+ () => {
+ setTimeout(() => {
+ expect(pageView.calledOnce).to.be.true;
+ stub.restore();
+ pageView.restore();
+ done();
+ }, 1000);
}
];
+
class Page extends React.Component {
static displayName = "Page";
@@ -184,7 +190,7 @@ describe("metrics", () => {
const execNextStep = execSteps(steps, done);
ReactDOM.render(
-
+
@@ -212,9 +218,13 @@ describe("metrics", () => {
};
});
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
expect(() => {
ReactDOM.render(
-
+
,
node,
@@ -273,11 +283,15 @@ describe("metrics", () => {
render() {
return Appication
;
}
- }
+ };
+
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
expect(() => {
ReactDOM.render(
-
+
,
node
diff --git a/test/ReactMetrics/willTrackPageView.spec.js b/test/ReactMetrics/willTrackPageView.spec.js
index 0ff6c93..ec6e14a 100644
--- a/test/ReactMetrics/willTrackPageView.spec.js
+++ b/test/ReactMetrics/willTrackPageView.spec.js
@@ -1,13 +1,14 @@
/* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, padded-blocks */
import React from "react";
import ReactDOM from "react-dom";
-import createHistory from "history/lib/createMemoryHistory";
-import {Router, Route} from "react-router";
+import {createMemoryHistory, Router, Route, useRouterHistory} from "react-router";
+import execSteps from "../execSteps";
import metrics from "../../src/react/metrics";
import exposeMetrics from "../../src/react/exposeMetrics";
import MetricsConfig from "../metrics.config";
import metricsMock from "../metricsMock";
+
describe("willTrackPageView", () => {
let node;
@@ -79,8 +80,10 @@ describe("willTrackPageView", () => {
}
}
+ const history = useRouterHistory(createMemoryHistory);
+
ReactDOM.render(
-
+
@@ -88,8 +91,8 @@ describe("willTrackPageView", () => {
,
node,
- function() {
- this.history.pushState(null, "/page/content2");
+ () => {
+ history.push("/page/content2");
}
);
});
@@ -119,8 +122,12 @@ describe("willTrackPageView", () => {
);
mock.expects("pageView").never();
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
ReactDOM.render(
-
+
,
node,
@@ -167,8 +174,12 @@ describe("willTrackPageView", () => {
}
);
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
ReactDOM.render(
-
+
,
node
@@ -191,7 +202,7 @@ describe("willTrackPageView", () => {
static displayName = "Page";
static willTrackPageView(routeState) {
- expect(routeState.pathname).to.equal("/page/123");
+ expect(routeState.pathname).to.equal("page/123");
expect(routeState.search).to.equal("?param1=value1");
expect(routeState.hash).to.equal("");
expect(JSON.stringify(routeState.state)).to.equal(
@@ -209,15 +220,23 @@ describe("willTrackPageView", () => {
}
}
+ const history = useRouterHistory(createMemoryHistory)({
+ basename: "/"
+ });
+
ReactDOM.render(
-
+
,
node,
- function() {
- this.history.pushState(state, "/page/123?param1=value1");
+ () => {
+ history.push({
+ pathname: "/page/123",
+ search: "?param1=value1",
+ state
+ });
}
);
});
diff --git a/test/core/attr2obj.spec.js b/test/core/attr2obj.spec.js
index 440e902..3c43771 100644
--- a/test/core/attr2obj.spec.js
+++ b/test/core/attr2obj.spec.js
@@ -1,7 +1,7 @@
/* eslint-disable react/no-multi-comp,jsx-a11y/href-no-hash */
import React from "react";
import ReactDOM from "react-dom";
-import TestUtils from "react-addons-test-utils";
+import ReactTestUtils from "react-dom/test-utils";
import attr2obj from "../../src/core/utils/attr2obj";
describe("attr2obj", () => {
@@ -58,9 +58,9 @@ describe("attr2obj", () => {
}
}
- const element = TestUtils.renderIntoDocument();
+ const element = ReactTestUtils.renderIntoDocument();
node = ReactDOM.findDOMNode(
- TestUtils.findRenderedDOMComponentWithTag(element, "a")
+ ReactTestUtils.findRenderedDOMComponentWithTag(element, "a")
);
obj = attr2obj(node, "data-analytics");
@@ -104,10 +104,10 @@ describe("attr2obj", () => {
}
}
- const element = TestUtils.renderIntoDocument();
+ const element = ReactTestUtils.renderIntoDocument();
node = ReactDOM.findDOMNode(
- TestUtils.findRenderedDOMComponentWithTag(element, "a")
+ ReactTestUtils.findRenderedDOMComponentWithTag(element, "a")
);
obj = attr2obj(node, "data-analytics");
diff --git a/yarn.lock b/yarn.lock
index f9f7c98..0c09d08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1698,7 +1698,7 @@ crc32-stream@~0.3.1:
buffer-crc32 "~0.2.1"
readable-stream "~1.0.24"
-create-react-class@^15.5.1, create-react-class@^15.6.0:
+create-react-class@^15.5.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
dependencies:
@@ -1823,7 +1823,7 @@ deep-eql@^0.1.3:
dependencies:
type-detect "0.1.1"
-deep-equal@^1.0.0, deep-equal@^1.0.1:
+deep-equal@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -3027,14 +3027,23 @@ hawk@~2.3.0:
hoek "2.x.x"
sntp "1.x.x"
-history@^2.0.0, history@^2.1.2:
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/history/-/history-2.1.2.tgz#4aa2de897a0e4867e4539843be6ecdb2986bfdec"
+history@3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/history/-/history-3.2.0.tgz#48bee0af905b7674b3cb888e6af8f16731e01d3c"
dependencies:
- deep-equal "^1.0.0"
- invariant "^2.0.0"
- query-string "^3.0.0"
- warning "^2.0.0"
+ invariant "^2.2.1"
+ loose-envify "^1.2.0"
+ query-string "^4.2.2"
+ warning "^3.0.0"
+
+history@^3.0.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
+ dependencies:
+ invariant "^2.2.1"
+ loose-envify "^1.2.0"
+ query-string "^4.2.2"
+ warning "^3.0.0"
hoek@0.9.x:
version "0.9.1"
@@ -4556,7 +4565,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prop-types@^15.5.10, prop-types@^15.5.4:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@@ -4620,10 +4629,11 @@ qs@~6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
-query-string@^3.0.0:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/query-string/-/query-string-3.0.3.tgz#ae2e14b4d05071d4e9b9eb4873c35b0dcd42e638"
+query-string@^4.2.2:
+ version "4.3.4"
+ resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
dependencies:
+ object-assign "^4.1.0"
strict-uri-encode "^1.0.0"
querystring-es3@^0.2.0:
@@ -4675,18 +4685,14 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
-react-addons-test-utils@^15.0.1:
- version "15.6.2"
- resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz#c12b6efdc2247c10da7b8770d185080a7b047156"
-
-react-dom@^15.0.1:
- version "15.6.2"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+react-dom@^16.2.0:
+ version "16.2.0"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
dependencies:
- fbjs "^0.8.9"
+ fbjs "^0.8.16"
loose-envify "^1.1.0"
- object-assign "^4.1.0"
- prop-types "^15.5.10"
+ object-assign "^4.1.1"
+ prop-types "^15.6.0"
react-redux@^4.4.5:
version "4.4.8"
@@ -4699,25 +4705,26 @@ react-redux@^4.4.5:
loose-envify "^1.1.0"
prop-types "^15.5.4"
-react-router@^2.0.0:
- version "2.8.1"
- resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7"
+react-router@3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.0.tgz#62b6279d589b70b34e265113e4c0a9261a02ed36"
dependencies:
- history "^2.1.2"
+ create-react-class "^15.5.1"
+ history "^3.0.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.2.1"
loose-envify "^1.2.0"
+ prop-types "^15.5.6"
warning "^3.0.0"
-react@^15.0.1:
- version "15.6.2"
- resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+react@^16.2.0:
+ version "16.2.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
dependencies:
- create-react-class "^15.6.0"
- fbjs "^0.8.9"
+ fbjs "^0.8.16"
loose-envify "^1.1.0"
- object-assign "^4.1.0"
- prop-types "^15.5.10"
+ object-assign "^4.1.1"
+ prop-types "^15.6.0"
read-pkg-up@^1.0.1:
version "1.0.1"
@@ -5875,12 +5882,6 @@ void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-warning@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901"
- dependencies:
- loose-envify "^1.0.0"
-
warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"