diff --git a/.travis.yml b/.travis.yml index 296b0b76..3ae91266 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,6 +2,7 @@ language: node_js os: - linux node_js: + - "9" - "8" - "7" - "6" @@ -18,7 +19,11 @@ script: - 'if [ -n "${TEST-}" ]; then npm run tests-only ; fi' sudo: false env: - - TEST=true + - TEST=true REACT=16 + - TEST=true REACT=15 + - TEST=true REACT=15.4 + - TEST=true REACT=0.14 + - TEST=true REACT=0.13 matrix: fast_finish: true include: @@ -28,3 +33,7 @@ matrix: - os: osx - env: TEST=true ALLOW_FAILURE=true - env: COVERAGE=true + - node_js: "9" + - node_js: "7" + - node_js: "5" + - env: TEST=true REACT=0.13 diff --git a/package.json b/package.json index 7c381a77..b3baad1e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "pretest": "npm run --silent lint", "preversion": "npm run test && npm run check-changelog && npm run check-only-changelog-changed", "tag": "git tag v$npm_package_version", + "react": "enzyme-adapter-react-install 15.4", "test": "npm run tests-only", + "pretests-only": "npm run react", "tests-only": "npm run mocha --silent test", "version:major": "npm --no-git-tag-version version major", "version:minor": "npm --no-git-tag-version version minor", @@ -52,7 +54,7 @@ "babel-register": "^6.26.0", "chai": "^4.1.2", "enzyme": "^3.2.0", - "enzyme-adapter-react-15.4": "^1.0.5", + "enzyme-adapter-react-helper": "^1.2.1", "eslint": "^4.11.0", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-import": "^2.8.0", diff --git a/test/.eslintrc b/test/.eslintrc index 506af945..aeca955e 100644 --- a/test/.eslintrc +++ b/test/.eslintrc @@ -4,8 +4,9 @@ }, "extends": "airbnb", "rules": { - "import/no-extraneous-dependencies": [2, { - "devDependencies": true - }] + "prefer-arrow-callback": 0, + "react/prefer-stateless-function": 0, + "react/no-multi-comp": 0, + "react/prop-types": 0, } } diff --git a/test/_setup.js b/test/_setup.js index 199147a0..20b4274b 100644 --- a/test/_setup.js +++ b/test/_setup.js @@ -1,4 +1,3 @@ -import Adapter from 'enzyme-adapter-react-15.4'; -import { configure } from 'enzyme'; +import configure from 'enzyme-adapter-react-helper'; -configure({ adapter: new Adapter() }); +configure(); diff --git a/test/withStyles_test.jsx b/test/withStyles_test.jsx index 36357b18..35f30395 100644 --- a/test/withStyles_test.jsx +++ b/test/withStyles_test.jsx @@ -5,6 +5,8 @@ import { render, shallow } from 'enzyme'; import deepmerge from 'deepmerge'; import sinon from 'sinon-sandbox'; import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider'; +import ifReact from 'enzyme-adapter-react-helper/build/ifReact'; +import safeSFC from 'enzyme-adapter-react-helper/build/safeSFC'; import ThemedStyleSheet from '../src/ThemedStyleSheet'; import { css, cssNoRTL, withStyles, withStylesPropTypes } from '../src/withStyles'; @@ -59,7 +61,7 @@ describe('withStyles()', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); shallow(); expect(testInterface.create.callCount).to.equal(1); }); @@ -69,7 +71,7 @@ describe('withStyles()', () => { return null; } - const result = withStyles(() => ({}))(MyComponent); + const result = withStyles(() => ({}))(safeSFC(MyComponent)); expect(result.displayName).to.equal('withStyles(MyComponent)'); }); @@ -79,7 +81,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); shallow().dive(); }); @@ -89,7 +91,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(MyComponent); + const Wrapped = withStyles(() => ({}), { themePropName: 'foo' })(safeSFC(MyComponent)); shallow().dive(); }); @@ -103,7 +105,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); shallow().dive(); }); @@ -113,7 +115,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles()(MyComponent); + const Wrapped = withStyles()(safeSFC(MyComponent)); shallow().dive(); }); @@ -127,7 +129,7 @@ describe('withStyles()', () => { foo: { color: '#ff0000', }, - }), { stylesPropName: 'bar' })(MyComponent); + }), { stylesPropName: 'bar' })(safeSFC(MyComponent)); shallow().dive(); }); @@ -136,7 +138,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); shallow(); expect(testInterface.flush.callCount).to.equal(0); }); @@ -146,7 +148,7 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}), { flushBefore: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { flushBefore: true })(safeSFC(MyComponent)); shallow(); expect(testInterface.flush.callCount).to.equal(1); }); @@ -157,7 +159,7 @@ describe('withStyles()', () => { } MyComponent.foo = 'bar'; - const Wrapped = withStyles(() => ({}), { flushBefore: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { flushBefore: true })(safeSFC(MyComponent)); expect(Wrapped.foo).to.equal('bar'); }); @@ -173,7 +175,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); const wrapper = shallow().dive(); expect(wrapper.prop('style')).to.eql({ color: '#990000' }); @@ -197,7 +199,7 @@ describe('withStyles()', () => { foo: { color: color.red, }, - }))(MyComponent); + }))(safeSFC(MyComponent)); // copied const expectedPropTypes = deepmerge({}, MyComponent.propTypes); @@ -218,19 +220,23 @@ describe('withStyles()', () => { return null; } - const Wrapped = withStyles(() => ({}))(MyComponent); - expect(Object.getPrototypeOf(Wrapped)).to.equal(React.Component); - expect(Object.getPrototypeOf(Wrapped.prototype)).to.equal(React.Component.prototype); - expect(Object.getPrototypeOf(Wrapped)).not.to.equal(React.PureComponent); - expect(Object.getPrototypeOf(Wrapped.prototype)).not.to.equal(React.PureComponent.prototype); + const Wrapped = withStyles(() => ({}))(safeSFC(MyComponent)); + const wrappedProto = Object.getPrototypeOf(Wrapped); + const wrappedProtoProto = Object.getPrototypeOf(Wrapped.prototype); + expect(wrappedProto).to.equal(React.Component); + expect(wrappedProtoProto).to.equal(React.Component.prototype); + if (React.PureComponent) { + expect(wrappedProto).not.to.equal(React.PureComponent); + expect(wrappedProtoProto).not.to.equal(React.PureComponent.prototype); + } }); - it('with the pureComponent option set, extends React.PureComponent', () => { + ifReact('>= 15.3', it, it.skip)('with the pureComponent option set, extends React.PureComponent', () => { function MyComponent() { return null; } - const Wrapped = withStyles(() => ({}), { pureComponent: true })(MyComponent); + const Wrapped = withStyles(() => ({}), { pureComponent: true })(safeSFC(MyComponent)); expect(Object.getPrototypeOf(Wrapped)).not.to.equal(React.Component); expect(Object.getPrototypeOf(Wrapped.prototype)).not.to.equal(React.Component.prototype); expect(Object.getPrototypeOf(Wrapped)).to.equal(React.PureComponent); @@ -240,18 +246,18 @@ describe('withStyles()', () => { describe('css/cssNoRTL', () => { it('css calls resolve method', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(testInterfaceResolveStub.callCount).to.equal(1); }); it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(testInterfaceResolveStub.callCount).to.equal(1); @@ -291,9 +297,9 @@ describe('RTL support', () => { describe('css/cssNoRTL', () => { it('css calls resolve method', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(resolveStub.callCount).to.equal(1); @@ -301,9 +307,9 @@ describe('RTL support', () => { }); it('cssNoRTL calls resolve method if resolveNoRTL does not exist', () => { - function MyComponent() { + const MyComponent = safeSFC(function MyComponent() { return
; - } + }); shallow(); expect(resolveStub.callCount).to.equal(0); @@ -317,7 +323,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render(); expect(testInterface.create).to.have.property('callCount', 1); }); @@ -327,7 +333,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render(( @@ -341,7 +347,7 @@ describe('RTL support', () => { return null; } - const WrappedComponent = withStyles(() => ({}))(MyComponent); + const WrappedComponent = withStyles(() => ({}))(safeSFC(MyComponent)); render((