Fix Table component `onQueryChange` prop default (https://github.com/woocommerce/woocommerce-admin/pull/4959)

* Fix default value for Table component onQueryChange.

* Add component changelog.

* Convert Table component tests to react-testing-library.

* Add test coverage for default callback props.

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,3 +1,7 @@
+# Unreleased Changes
+
+- Fixed default value for `<Table />` component `onQueryChange` prop.
+
 # 5.0.0
 
 -   Added `<Timeline />` component.

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
-import { find, first, isEqual, noop, without } from 'lodash';
+import { find, first, isEqual, without } from 'lodash';
 import PropTypes from 'prop-types';
 
 /**
@@ -337,8 +337,8 @@ TableCard.propTypes = {
 
 TableCard.defaultProps = {
 	isLoading: false,
-	onQueryChange: noop,
-	onColumnsChange: noop,
+	onQueryChange: () => () => {},
+	onColumnsChange: () => {},
 	onSort: undefined,
 	query: {},
 	rowHeader: 0,

plugins/woocommerce-admin/packages/components/src/table/test/index.js

@@ -1,22 +1,22 @@
-/* eslint-disable jest/no-mocks-import */
 /**
  * External dependencies
  */
-import fetch from 'node-fetch';
-import { mount, shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { toHaveClass } from '@testing-library/jest-dom/matchers';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import TableCard from '../index';
-import mockHeaders from '../__mocks__/table-mock-headers';
-import mockData from '../__mocks__/table-mock-data';
+import mockHeaders from './data/table-mock-headers';
+import mockData from './data/table-mock-data';
 
-window.fetch = fetch;
+expect.extend( { toHaveClass } );
 
 describe( 'TableCard', () => {
-	test( 'should render placeholder table while loading', () => {
-		const tableCard = shallow(
+	it( 'should render placeholder table while loading', () => {
+		render(
 			<TableCard
 				title="Revenue"
 				headers={ mockHeaders }
@@ -27,11 +27,13 @@ describe( 'TableCard', () => {
 			/>
 		);
 
-		expect( tableCard.find( 'TablePlaceholder' ).length ).toBe( 1 );
+		expect( screen.getByRole( 'group', { hidden: true } ) ).toHaveClass(
+			'is-loading'
+		);
 	} );
 
-	test( 'should not render placeholder table when not loading', () => {
-		const tableCard = mount(
+	it( 'should not render placeholder table when not loading', () => {
+		render(
 			<TableCard
 				title="Revenue"
 				headers={ mockHeaders }
@@ -42,7 +44,34 @@ describe( 'TableCard', () => {
 			/>
 		);
 
-		expect( tableCard.find( 'Table' ).length ).toBe( 1 );
-		expect( tableCard.find( 'TablePlaceholder' ).length ).toBe( 0 );
+		expect( screen.getByRole( 'group' ) ).not.toHaveClass( 'is-loading' );
+	} );
+
+	it( 'should not error with default callback props', () => {
+		render(
+			<TableCard
+				title="Revenue"
+				headers={ mockHeaders }
+				isLoading={ false }
+				rows={ mockData }
+				rowsPerPage={ 1 }
+				totalRows={ 5 }
+			/>
+		);
+
+		// Trigger a query change (next page).
+		userEvent.click(
+			screen.getByLabelText( 'Next Page', { selector: 'button' } )
+		);
+
+		// Trigger a column change.
+		userEvent.click(
+			screen.getByTitle( 'Choose which values to display', {
+				selector: 'button',
+			} )
+		);
+
+		// We shouldn't get here if an error occurred.
+		expect( true ).toBe( true );
 	} );
 } );