Fix even more ESLint warnings

.eslintrc

@@ -127,3 +127,8 @@ overrides:
  react/forbid-foreign-prop-types: 1
  env:
  jest: true
+ - files:
+ - "packages/**/tests/**/*Test.js"
+ rules:
+ no-console: 0
+ react/jsx-no-bind: 0

packages/analysis-report/src/AnalysisList.js

@@ -1,6 +1,7 @@
 /* External dependencies */
 import { __, sprintf } from "@wordpress/i18n";
-import React from "react";
+import { useCallback } from "@wordpress/element";
+import React from "@wordpress/element";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import noop from "lodash/noop";
@@ -84,6 +85,16 @@ export default function AnalysisList( props ) {
  slug or SEO title). */
  __( "Edit your %1$s", "wordpress-seo" ), editFieldName );
 
+ const onButtonClickMarks = useCallback(
+ () => props.onMarksButtonClick( result.id, result.marker ),
+ [ props.onMarksButtonClick, result.id, result.marker ]
+ );
+
+ const onButtonClickEdit = useCallback(
+ () => props.onEditButtonClick( result.id ),
+ [ props.onEditButtonClick, result.id ]
+ );
+
  return <AnalysisResult
  key={ result.id }
  text={ result.text }
@@ -96,8 +107,8 @@ export default function AnalysisList( props ) {
  suppressedText={ result.rating === "upsell" }
  buttonIdMarks={ markButtonId }
  buttonIdEdit={ editButtonId }
- onButtonClickMarks={ () => props.onMarksButtonClick( result.id, result.marker ) }
- onButtonClickEdit={ () => props.onEditButtonClick( result.id ) }
+ onButtonClickMarks={ onButtonClickMarks }
+ onButtonClickEdit={ onButtonClickEdit }
  marksButtonClassName={ props.marksButtonClassName }
  editButtonClassName={ props.editButtonClassName }
  marksButtonStatus={ props.marksButtonStatus }

packages/components/src/select/Select.js

@@ -1,3 +1,4 @@
+import { noop } from "lodash";
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import FieldGroup, { FieldGroupProps, FieldGroupDefaultProps } from "../field-group/FieldGroup";
@@ -6,8 +7,6 @@ import { default as ReactSelect } from "react-select";
 // Import required CSS.
 import "./select.css";
 
-const noop = () => {};
-
 /**
  * Defines how a select option should look.
  */

packages/components/src/table/ListTable.js

@@ -137,4 +137,8 @@ ListTable.propTypes = {
  ] ),
 };
 
+ListTable.defaultProps = {
+ children: [],
+};
+
 export { ListTable, ZebrafiedListTable };

packages/configuration-wizard/src/ConfigurationWizard.js

@@ -41,12 +41,24 @@ class ConfigurationWizard extends React.Component {
  };
 
  this.postStep = this.postStep.bind( this );
+ this.setStepRef = this.setStepRef.bind( this );
  this.setNextStep = this.setNextStep.bind( this );
  this.setPreviousStep = this.setPreviousStep.bind( this );
  this.listenToHashChange = this.listenToHashChange.bind( this );
  window.addEventListener( "hashchange", this.listenToHashChange, false );
  }
 
+ /**
+ * Sets a ref on this component.
+ *
+ * @param {Object} ref The ref.
+ *
+ * @returns {void}
+ */
+ setStepRef( ref ) {
+ this.step = ref;
+ }
+
  /**
  * Remove the prepended hashtag from the passed string.
  *
@@ -388,9 +400,7 @@ class ConfigurationWizard extends React.Component {
  <div className="yoast-wizard">
  { this.renderErrorMessage() }
  <Step
- ref={ ref => {
- this.step = ref;
- } }
+ ref={ this.setStepRef }
  currentStep={ this.state.currentStepId }
  title={ step.title }
  fields={ step.fields }

packages/configuration-wizard/src/Step.js

@@ -32,6 +32,8 @@ class Step extends React.Component {
  HTML,
  };
 
+ this.setStepContainerRef = this.setStepContainerRef.bind( this );
+
  // Make the components available.
  this.components = Object.assign( components, props.customComponents );
 
@@ -40,6 +42,17 @@ class Step extends React.Component {
  };
  }
 
+ /**
+ * Sets the step container ref.
+ *
+ * @param {Object} ref The ref.
+ *
+ * @returns {void}
+ */
+ setStepContainerRef( ref ) {
+ this.stepContainer = ref;
+ }
+
  /**
  * Sets the field values for the given step.
  *
@@ -72,22 +85,26 @@ class Step extends React.Component {
  */
  setFieldValues( fields, currentStep ) {
  const fieldNames = Object.keys( fields );
- const fieldValues = this.state.fieldValues;
 
- if ( typeof fieldValues[ currentStep ] === "undefined" ) {
- fieldValues[ currentStep ] = {};
- }
+ this.setState( prevState => {
+ const fieldValues = prevState.fieldValues;
 
- fieldNames.forEach(
- ( fieldName ) => {
- if ( typeof fieldValues[ currentStep ][ fieldName ] === "undefined" ) {
- fieldValues[ currentStep ][ fieldName ] = ( typeof fields[ fieldName ].data === "undefined" ) ? "" : fields[ fieldName ].data;
- }
+ if ( typeof fieldValues[ currentStep ] === "undefined" ) {
+ fieldValues[ currentStep ] = {};
  }
- );
 
- this.setState( {
- currentStep, fieldValues,
+ fieldNames.forEach(
+ ( fieldName ) => {
+ if ( typeof fieldValues[ currentStep ][ fieldName ] === "undefined" ) {
+ fieldValues[ currentStep ][ fieldName ] = ( typeof fields[ fieldName ].data === "undefined" ) ? "" : fields[ fieldName ].data;
+ }
+ }
+ );
+
+ return {
+ currentStep,
+ fieldValues,
+ };
  } );
  }
 
@@ -99,16 +116,18 @@ class Step extends React.Component {
  * @returns {void}
  */
  onChange( evt ) {
- const fieldValues = this.state.fieldValues;
- const fieldName = evt.target.name;
+ this.setState( prevState => {
+ const fieldValues = prevState.fieldValues;
+ const fieldName = evt.target.name;
 
- // If the field value is undefined, add the fields to the field values.
- if ( this.hasFieldValue( this.state.currentStep, fieldName ) ) {
- fieldValues[ this.state.currentStep ][ fieldName ] = evt.target.value;
- }
+  // If the field value is undefined, add the fields to the field values.
+  if ( this.hasFieldValue( prevState.currentStep, fieldName ) ) {
+  fieldValues[ prevState.currentStep ][ fieldName ] = evt.target.value;
+  }
 
- this.setState( {
- fieldValues,
+ return {
+ fieldValues,
+ };
  } );
  }
 
@@ -272,9 +291,7 @@ class Step extends React.Component {
  return (
  <div
  className={ `${ this.props.classPrefix }--step--container` }
- ref={ stepContainer => {
- this.stepContainer = stepContainer;
- } }
+ ref={ this.setStepContainerRef }
  tabIndex="-1"
  aria-labelledby="step-title"
  >

packages/yoastseo/src/app.js

@@ -1,7 +1,7 @@
 import SnippetPreview from "./snippetPreview/snippetPreview.js";
 
 import { setLocaleData } from "@wordpress/i18n";
-import { debounce, defaultsDeep, forEach, isArray, isEmpty, isFunction, isObject, isString, isUndefined, merge, throttle } from "lodash-es";
+import { debounce, defaultsDeep, forEach, isArray, isEmpty, isFunction, isObject, isString, isUndefined, merge, noop, throttle } from "lodash-es";
 import MissingArgument from "./errors/missingArgument";
 
 import SEOAssessor from "./scoring/seoAssessor.js";
@@ -29,12 +29,12 @@ var inputDebounceDelay = 800;
  */
 var defaults = {
  callbacks: {
- bindElementEvents: function() {},
- updateSnippetValues: function() {},
- saveScores: function() {},
- saveContentScore: function() {},
- updatedContentResults: function() {},
- updatedKeywordsResults: function() {},
+ bindElementEvents: noop,
+ updateSnippetValues: noop,
+ saveScores: noop,
+ saveContentScore: noop,
+ updatedContentResults: noop,
+ updatedKeywordsResults: noop,
  },
  sampleText: {
  baseUrl: "example.org/",