Tests: Improve configuration and mocking strategy

__mocks__/@wordpress/api-fetch/index.js

@@ -0,0 +1,6 @@
+const apiFetch = jest.fn( () => {
+	return apiFetch.mockReturnValue;
+} );
+apiFetch.mockReturnValue = 'mock this value by overriding apiFetch.mockReturnValue';
+
+export default apiFetch;

bin/packages/build.js

@@ -136,7 +136,10 @@ function buildFileFor( file, silent, environment ) {
 function buildPackage( packagePath ) {
 	const srcDir = path.resolve( packagePath, SRC_DIR );
 	const files = glob.sync( `${ srcDir }/**/*.js`, {
-		ignore: `${ srcDir }/**/test/**/*.js`,
+		ignore: [
+			`${ srcDir }/**/test/**/*.js`,
+			`${ srcDir }/**/__mocks__/**/*.js`,
+		],
 		nodir: true,
 	} );
 

edit-post/components/header/more-menu/test/index.js

@@ -8,6 +8,8 @@ import { mount } from 'enzyme';
  */
 import MoreMenu from '../index';
 
+jest.mock( '../../../../../packages/components/src/button' );
+
 describe( 'MoreMenu', () => {
 	it( 'should match snapshot', () => {
 		const wrapper = mount(

edit-post/components/sidebar/plugin-post-publish-panel/test/index.js

@@ -13,6 +13,8 @@ import { SlotFillProvider } from '@wordpress/components';
  */
 import PluginPostPublishPanel from '../';
 
+jest.mock( '../../../../../packages/components/src/button' );
+
 describe( 'PluginPostPublishPanel', () => {
 	test( 'renders fill properly', () => {
 		const wrapper = mount(

edit-post/components/sidebar/plugin-pre-publish-panel/test/index.js

@@ -13,6 +13,8 @@ import { SlotFillProvider } from '@wordpress/components';
  */
 import PluginPrePublishPanel from '../';
 
+jest.mock( '../../../../../packages/components/src/button' );
+
 describe( 'PluginPrePublishPanel', () => {
 	test( 'renders fill properly', () => {
 		const wrapper = mount(

editor/components/post-preview-button/test/index.js

@@ -8,6 +8,8 @@ import { shallow } from 'enzyme';
  */
 import { PostPreviewButton } from '../';
 
+jest.mock( '../../../../packages/components/src/button' );
+
 describe( 'PostPreviewButton', () => {
 	describe( 'setPreviewWindowLink()', () => {
 		it( 'should do nothing if there is no preview window', () => {

editor/components/post-publish-button/test/index.js

@@ -8,6 +8,8 @@ import { shallow } from 'enzyme';
  */
 import { PostPublishButton } from '../';
 
+jest.mock( '../../../../packages/components/src/button' );
+
 describe( 'PostPublishButton', () => {
 	describe( 'disabled', () => {
 		it( 'should be disabled if post is currently saving', () => {

package.json

@@ -144,8 +144,8 @@
 	"scripts": {
 		"prebuild": "npm run check-engines",
 		"clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style",
-		"prebuild:packages": "npm run clean:packages && lerna run build && cross-env INCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes SKIP_JSX_PRAGMA_TRANSFORM=1 node ./bin/packages/build.js",
-		"build:packages": "cross-env EXCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes node ./bin/packages/build.js",
+		"prebuild:packages": "npm run clean:packages && lerna run build && cross-env INCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes,jest-console SKIP_JSX_PRAGMA_TRANSFORM=1 node ./bin/packages/build.js",
+		"build:packages": "cross-env EXCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,jest-console,postcss-themes node ./bin/packages/build.js",
 		"build": "npm run build:packages && cross-env NODE_ENV=production webpack",
 		"check-engines": "check-node-version --package",
 		"ci": "concurrently \"npm run lint\" \"npm run test-unit:coverage-ci\"",

packages/components/src/autocomplete/test/index.js

@@ -16,7 +16,7 @@ import { ENTER, ESCAPE, UP, DOWN, SPACE } from '@wordpress/keycodes';
  */
 import EnhancedAutocomplete, { Autocomplete } from '../';
 
-jest.useFakeTimers();
+jest.mock( '../../button' );
 
 class FakeEditor extends Component {
 	// we want to change the editor contents manually so don't let react update it

packages/components/src/button/__mocks__/index.js

@@ -0,0 +1,17 @@
+// [TEMPORARY]: Button uses React.forwardRef, added in [email protected] but not yet
+// supported by Enzyme as of [email protected] . 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;

packages/components/src/button/test/index.js

@@ -14,9 +14,6 @@ import { createRef } from '@wordpress/element';
  */
 import ButtonWithForwardedRef, { Button } from '../';
 
-// [TEMPORARY]: Only needed so long as Enzyme does not support React.forwardRef
-jest.unmock( '../' );
-
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {

packages/components/src/color-palette/test/index.js

@@ -8,6 +8,8 @@ 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';

packages/components/src/higher-order/with-api-data/test/request.js

@@ -14,6 +14,8 @@ import request, {
 	isRequestMethod,
 } from '../request';
 
+jest.mock( '@wordpress/api-fetch' );
+
 describe( 'request', () => {
 	const actualResponse = {
 		json: () => Promise.resolve( {} ),

packages/components/src/icon-button/test/index.js

@@ -8,6 +8,8 @@ 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', () => {

packages/components/src/menu-item/test/index.js

@@ -8,6 +8,8 @@ import { shallow } from 'enzyme';
  */
 import MenuItem from '../';
 
+jest.mock( '../../button' );
+
 describe( 'MenuItem', () => {
 	test( 'should match snapshot when only label provided', () => {
 		const wrapper = shallow(

packages/components/src/panel/test/body.js

@@ -8,6 +8,8 @@ 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', () => {

packages/core-data/src/test/entities.js

@@ -9,6 +9,8 @@ import apiFetch from '@wordpress/api-fetch';
 import { getMethodName, defaultEntities, getKindEntities } from '../entities';
 import { addEntities } from '../actions';
 
+jest.mock( '@wordpress/api-fetch' );
+
 describe( 'getMethodName', () => {
 	it( 'Should return the right method name for an entity with the root kind', () => {
 		const methodName = getMethodName( 'root', 'postType' );

packages/custom-templated-path-webpack-plugin/test/fixtures/webpack.config.js

@@ -8,7 +8,7 @@ const { basename } = require( 'path' );
  * Internal dependencies
  */
 
-const CustomTemplatedPathPlugin = require( '../../' );
+const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
 
 module.exports = {
 	mode: 'development',

packages/library-export-default-webpack-plugin/test/fixtures/webpack.config.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-const LibraryExportDefaultPlugin = require( '../../' );
+const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
 
 module.exports = {
 	mode: 'development',

packages/nux/src/components/dot-tip/test/index.js

@@ -9,6 +9,8 @@ import { noop } from 'lodash';
  */
 import { DotTip } from '..';
 
+jest.mock( '../../../../../components/src/button' );
+
 describe( 'DotTip', () => {
 	it( 'should not render anything if invisible', () => {
 		const wrapper = shallow(

test/unit/jest.config.json

@@ -11,14 +11,13 @@
 		"<rootDir>/packages/.*/benchmark/"
 	],
 	"moduleNameMapper": {
-		"@wordpress\\/(components|editor|utils|edit-post|core-blocks)$": "$1",
-		"@wordpress\\/(a-z0-9-)$": "packages/$1/src"
+		"@wordpress\\/(components|editor|edit-post|core-blocks)$": "$1",
+		"@wordpress\\/(block-serialization-spec-parser|is-shallow-equal)$": "packages/$1",
+		"@wordpress\\/([a-z0-9-]+)$": "packages/$1/src"
 	},
 	"preset": "@wordpress/jest-preset-default",
 	"setupFiles": [
-		"core-js/fn/symbol/async-iterator",
-		"<rootDir>/test/unit/setup-wp-aliases.js",
-		"<rootDir>/test/unit/setup-mocks.js"
+		"core-js/fn/symbol/async-iterator"
 	],
 	"testPathIgnorePatterns": [
 		"/node_modules/",