diff --git a/package-lock.json b/package-lock.json index a86ed000f301bd..b9bda6a34c73e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2895,7 +2895,7 @@ "@wordpress/jest-console": "file:packages/jest-console", "babel-jest": "^24.1.0", "enzyme": "^3.9.0", - "enzyme-adapter-react-16": "^1.9.1", + "enzyme-adapter-react-16": "^1.10.0", "enzyme-to-json": "^3.3.5" } }, diff --git a/packages/components/src/button/__mocks__/index.js b/packages/components/src/button/__mocks__/index.js deleted file mode 100644 index d43b7380b09ec8..00000000000000 --- a/packages/components/src/button/__mocks__/index.js +++ /dev/null @@ -1,17 +0,0 @@ -// [TEMPORARY]: Button uses React.forwardRef, added in react@16.3.0 but not yet -// supported by Enzyme as of enzyme-adapter-react-16@1.1.1 . This mock unwraps -// the ref forwarding, so any tests relying on this behavior will fail. -// -// See: https://github.com/airbnb/enzyme/issues/1604 -// See: https://github.com/airbnb/enzyme/pull/1592/files - -const { Component } = require( 'react' ); -const { Button: RawButton } = require.requireActual( '../index' ); - -class Button extends Component { - render() { - return RawButton( this.props ); - } -} - -export default Button; diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap index 3a49ace1959adf..e0ad2ef51ff3d9 100644 --- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap @@ -180,7 +180,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
- +
`; @@ -272,7 +272,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` renderContent={[Function]} renderToggle={[Function]} /> - + `; diff --git a/packages/components/src/color-palette/test/index.js b/packages/components/src/color-palette/test/index.js index 8983537ed7dc14..a515b9b7696281 100644 --- a/packages/components/src/color-palette/test/index.js +++ b/packages/components/src/color-palette/test/index.js @@ -8,8 +8,6 @@ import { shallow } from 'enzyme'; */ import ColorPalette from '../'; -jest.mock( '../../button' ); - describe( 'ColorPalette', () => { const colors = [ { name: 'red', color: '#f00' }, { name: 'white', color: '#fff' }, { name: 'blue', color: '#00f' } ]; const currentColor = '#f00'; diff --git a/packages/components/src/icon-button/test/index.js b/packages/components/src/icon-button/test/index.js index d5b67eec7930f6..133224941c1b56 100644 --- a/packages/components/src/icon-button/test/index.js +++ b/packages/components/src/icon-button/test/index.js @@ -8,8 +8,6 @@ import { shallow } from 'enzyme'; */ import IconButton from '../'; -jest.mock( '../../button' ); - describe( 'IconButton', () => { describe( 'basic rendering', () => { it( 'should render an top level element with only a class property', () => { @@ -30,7 +28,7 @@ describe( 'IconButton', () => { it( 'should add an aria-label when the label property is used', () => { const iconButton = shallow( WordPress ); - expect( iconButton.name() ).toBe( 'Button' ); + expect( iconButton.name() ).toBe( 'ForwardRef(Button)' ); expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' ); } ); @@ -38,7 +36,7 @@ describe( 'IconButton', () => { const iconButton = shallow( ); expect( iconButton.name() ).toBe( 'Tooltip' ); expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' ); - expect( iconButton.find( 'Button' ).prop( 'aria-label' ) ).toBe( 'WordPress' ); + expect( iconButton.find( 'ForwardRef(Button)' ).prop( 'aria-label' ) ).toBe( 'WordPress' ); } ); it( 'should support explicit aria-label override', () => { @@ -60,12 +58,12 @@ describe( 'IconButton', () => { const iconButton = shallow( ); expect( iconButton.name() ).toBe( 'Tooltip' ); expect( iconButton.prop( 'text' ) ).toBe( 'Custom' ); - expect( iconButton.find( 'Button' ).prop( 'aria-label' ) ).toBe( 'WordPress' ); + expect( iconButton.find( 'ForwardRef(Button)' ).prop( 'aria-label' ) ).toBe( 'WordPress' ); } ); it( 'should allow tooltip disable', () => { const iconButton = shallow( ); - expect( iconButton.name() ).toBe( 'Button' ); + expect( iconButton.name() ).toBe( 'ForwardRef(Button)' ); expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' ); } ); diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap index 9ec9378f631a1e..caa467a67a66bd 100644 --- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap +++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap @@ -17,7 +17,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` `; exports[`MenuItem should match snapshot when info is provided 1`] = ` - + `; exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = ` @@ -55,7 +55,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally `; exports[`MenuItem should match snapshot when only label provided 1`] = ` - + `; diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js index c5508e55629ace..f521add7452c86 100644 --- a/packages/components/src/menu-item/test/index.js +++ b/packages/components/src/menu-item/test/index.js @@ -9,8 +9,6 @@ import { noop } from 'lodash'; */ import { MenuItem } from '../'; -jest.mock( '../../button' ); - describe( 'MenuItem', () => { it( 'should match snapshot when only label provided', () => { const wrapper = shallow( diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index cda8c66bbf6d57..78d4774afccd8d 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -8,8 +8,6 @@ import { shallow, mount } from 'enzyme'; */ import { PanelBody } from '../body'; -jest.mock( '../../button' ); - describe( 'PanelBody', () => { describe( 'basic rendering', () => { it( 'should render an empty div with the matching className', () => { diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap index 4049a747b3fe0a..9e8a474f6f921c 100644 --- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap @@ -23,7 +23,7 @@ exports[`MoreMenu should match snapshot 1`] = ` position="bottom" text="Show more tools & options" > - - + diff --git a/packages/edit-post/src/components/header/more-menu/test/index.js b/packages/edit-post/src/components/header/more-menu/test/index.js index 92daff09971514..83f9de19ba7068 100644 --- a/packages/edit-post/src/components/header/more-menu/test/index.js +++ b/packages/edit-post/src/components/header/more-menu/test/index.js @@ -8,8 +8,6 @@ import { mount } from 'enzyme'; */ import MoreMenu from '../index'; -jest.mock( '../../../../../../components/src/button' ); - describe( 'MoreMenu', () => { it( 'should match snapshot', () => { const wrapper = mount( diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js index 66b159bb255337..f4b5ca77eca163 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js @@ -9,8 +9,6 @@ import { render } from '@wordpress/element'; */ import PluginPostPublishPanel from '../'; -jest.mock( '../../../../../../components/src/button' ); - describe( 'PluginPostPublishPanel', () => { test( 'renders fill properly', () => { const div = document.createElement( 'div' ); diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js index 1383341bfe7050..9c011e1cbc2a09 100644 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js @@ -9,8 +9,6 @@ import { render } from '@wordpress/element'; */ import PluginPrePublishPanel from '../'; -jest.mock( '../../../../../../components/src/button' ); - describe( 'PluginPrePublishPanel', () => { test( 'renders fill properly', () => { const div = document.createElement( 'div' ); diff --git a/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap index f1cf3c119e9ade..681c33a42d9976 100644 --- a/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/block-controls/test/__snapshots__/index.js.snap @@ -1,32 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BlockControls Should render a dynamic toolbar of controls 1`] = ` - - -

- Child -

-
+ } +> + + +

+ Child +

+
+
+ `; diff --git a/packages/editor/src/components/block-controls/test/index.js b/packages/editor/src/components/block-controls/test/index.js index 1eee2fbf5af2a3..f970dc030cadbe 100644 --- a/packages/editor/src/components/block-controls/test/index.js +++ b/packages/editor/src/components/block-controls/test/index.js @@ -6,7 +6,8 @@ import { shallow } from 'enzyme'; /** * Internal dependencies */ -import { BlockControls } from '../'; +import BlockControls from '../'; +import BlockEdit from '../../block-edit'; describe( 'BlockControls', () => { const controls = [ @@ -27,9 +28,15 @@ describe( 'BlockControls', () => { }, ]; - // Skipped temporarily until Enzyme publishes new version that works with React 16.3.0 APIs. - // eslint-disable-next-line jest/no-disabled-tests - test.skip( 'Should render a dynamic toolbar of controls', () => { - expect( shallow( Child

} /> ) ).toMatchSnapshot(); + it( 'should render a dynamic toolbar of controls', () => { + const wrapper = shallow( + + +

Child

+
+
+ ); + + expect( wrapper ).toMatchSnapshot(); } ); } ); diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap index cfbde2342e780d..fc928b5e12cb9e 100644 --- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PostPreviewButton render() should render currentPostLink otherwise 1`] = ` - + `; exports[`PostPreviewButton render() should render previewLink if provided 1`] = ` - + `; diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js index 6920f27fc809c5..7bd9856de05c77 100644 --- a/packages/editor/src/components/post-preview-button/test/index.js +++ b/packages/editor/src/components/post-preview-button/test/index.js @@ -8,8 +8,6 @@ import { shallow } from 'enzyme'; */ import { PostPreviewButton } from '../'; -jest.mock( '../../../../../components/src/button' ); - describe( 'PostPreviewButton', () => { describe( 'setPreviewWindowLink()', () => { it( 'should do nothing if there is no preview window', () => { diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js index 30156438cc14f1..be407f86e14cdb 100644 --- a/packages/editor/src/components/post-publish-button/test/index.js +++ b/packages/editor/src/components/post-publish-button/test/index.js @@ -8,8 +8,6 @@ import { shallow } from 'enzyme'; */ import { PostPublishButton } from '../'; -jest.mock( '../../../../../components/src/button' ); - describe( 'PostPublishButton', () => { describe( 'aria-disabled', () => { it( 'should be true if post is currently saving', () => { @@ -196,6 +194,6 @@ describe( 'PostPublishButton', () => { /> ); - expect( wrapper.find( 'Button' ).prop( 'isBusy' ) ).toBe( true ); + expect( wrapper.find( 'ForwardRef(Button)' ).prop( 'isBusy' ) ).toBe( true ); } ); } ); diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md index 7ff9fd2ced5513..04eb1446a749dd 100644 --- a/packages/jest-preset-default/CHANGELOG.md +++ b/packages/jest-preset-default/CHANGELOG.md @@ -8,6 +8,7 @@ ### Internal - The bundled `enzyme` dependency has been updated from requiring `^3.7.0` to requiring `^3.9.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)). +- The bundled `enzyme-adapter-react-16` dependency has been updated from requiring `^1.6.0` to requiring `^1.10.0` ([#13922](https://github.com/WordPress/gutenberg/pull/13922)). ## 3.0.3 (2018-11-20) diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json index bc73370bb47068..e8bbd45dd0b8bb 100644 --- a/packages/jest-preset-default/package.json +++ b/packages/jest-preset-default/package.json @@ -33,7 +33,7 @@ "@wordpress/jest-console": "file:../jest-console", "babel-jest": "^24.1.0", "enzyme": "^3.9.0", - "enzyme-adapter-react-16": "^1.9.1", + "enzyme-adapter-react-16": "^1.10.0", "enzyme-to-json": "^3.3.5" }, "peerDependencies": { diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap index d9639628174e7d..155eac26c893a7 100644 --- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap +++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap @@ -15,11 +15,11 @@ exports[`DotTip should render correctly 1`] = ` It looks like you’re writing a letter. Would you like help?

- +

{ it( 'should not render anything if invisible', () => { const wrapper = shallow( @@ -37,7 +35,7 @@ describe( 'DotTip', () => { It looks like you’re writing a letter. Would you like help? ); - wrapper.find( 'Button[children="Got it"]' ).first().simulate( 'click' ); + wrapper.find( 'ForwardRef(Button)[children="Got it"]' ).first().simulate( 'click' ); expect( onDismiss ).toHaveBeenCalled(); } );