[Security Solution] Fixing jest warnings and errors #86532

stephmilovic · 2020-12-18T20:42:29Z

Summary

Another round of jest error/warning fixes. Fixes detailed in the files.

There were 2 warnings I gave up on clearing if anyone wants to take a crack at them. Same warning on 2 files.

management/pages/endpoint_hosts/view/index.test.tsx
common/components/query_bar/index.test.tsx

The warning/error:

 console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
        in QueryStringInputUI (created by EnhancedType)
        in EnhancedType (created by QueryBarTopRow)
        in div (created by EuiFlexItem)
        in EuiFlexItem (created by QueryBarTopRow)
        in div (created by EuiFlexGroup)
        in EuiFlexGroup (created by QueryBarTopRow)
        in QueryBarTopRow (created by SearchBarUI)
        in div (created by SearchBarUI)
        in SearchBarUI (created by EnhancedType)
        in EnhancedType (created by InjectIntl(EnhancedType))
        in InjectIntl(EnhancedType) (created by WrappedSearchBar)
        in Suspense (created by WrappedSearchBar)
        in WrappedSearchBar (created by EnhancedType)
        in EnhancedType (created by InjectIntl(EnhancedType))
        in InjectIntl(EnhancedType)
        in Unknown (created by Proxy)
        in Provider (created by App)
        in App (created by ErrorBoundary)
        in ErrorBoundary (created by DragDropContext)
        in DragDropContext (created by TestProvidersComponent)
        in ThemeProvider (created by TestProvidersComponent)
        in Provider (created by TestProvidersComponent)
        in ApolloProvider (created by TestProvidersComponent)
        in Provider
        in Unknown (created by TestProvidersComponent)
        in PseudoLocaleWrapper (created by I18nProvider)
        in IntlProvider (created by I18nProvider)
        in I18nProvider (created by TestProvidersComponent)
        in TestProvidersComponent (created by Proxy)
        in Proxy

      144 |
      145 |     if (!currentAbortController.signal.aborted) {
    > 146 |       this.setState({
          |            ^
      147 |         indexPatterns: [...objectPatterns, ...objectPatternsFromStrings],
      148 |       });
      149 |

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warnAboutUpdateOnUnmountedFiberInDEV (node_modules/react-dom/cjs/react-dom.development.js:25738:5)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23679:5)
      at Object.enqueueSetState (node_modules/react-dom/cjs/react-dom.development.js:13994:5)
      at QueryStringInputUI.setState (node_modules/react/cjs/react.development.js:325:16)
      at QueryStringInputUI.<anonymous> (src/plugins/data/public/ui/query_string_input/query_string_input.tsx:146:12)

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios

stephmilovic · 2020-12-18T20:45:37Z

x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx

@@ -101,17 +101,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
        <EuiDescriptionList compressed>
          <EuiFlexGroup gutterSize="l" alignItems="center">
            <EuiFlexItem>
+              <EuiDescriptionListTitle>


This clears up the following error that showed in cases/components/case_view/index.test.tsx

Warning: validateDOMNesting(...): <dt> cannot appear as a descendant of <dd>. in dt (created by EuiDescriptionListTitle) in EuiDescriptionListTitle (created by CaseActionBarComponent) in dd (created by EuiDescriptionListDescription) in EuiDescriptionListDescription (created by CaseActionBarComponent) in div (created by EuiFlexItem)

stephmilovic · 2020-12-18T20:46:29Z

x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx

+        <EventDetails {...alertsProps} />
+      </TestProviders>
+    ) as ReactWrapper;
+    await waitFor(() => wrapper.update());


Clears up the following error:

Warning: An update to SummaryViewComponent inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in SummaryViewComponent (created by EventDetailsComponent) in div (created by EuiTabbedContent) in div (created by EuiTabbedContent) in EuiTabbedContent (created by Styled(EuiTabbedContent)) in Styled(EuiTabbedContent) (created by EventDetailsComponent) in EventDetailsComponent

stephmilovic · 2020-12-18T20:47:26Z

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx

@@ -84,7 +91,7 @@ const eventsViewerDefaultProps = {
  sort: [
    {
      columnId: 'foo',
-      sortDirection: 'none' as SortDirection,
+      sortDirection: 'asc' as SortDirection,


Clears up the following error:

Warning: Failed prop type: Invalid prop `sorting.columns[0].direction` of value `none` supplied to `EuiDataGridColumnSortingDraggable`, expected one of ["asc","desc"]. in EuiDataGridColumnSortingDraggable (created by ColumnHeadersComponent) in ColumnHeadersComponent in ColumnHeadersComponent in div (created by styled.div) in styled.div in div (created by TimelineBody) in TimelineBody

stephmilovic · 2020-12-18T20:47:41Z

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx

+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    useDataGridColumnSorting: jest.fn(),


Clears up the following error:

Warning: Failed prop type: The prop `display` is marked as required in `EuiDataGridColumnSortingDraggable`, but its value is `undefined`. in EuiDataGridColumnSortingDraggable (created by ColumnHeadersComponent) in ColumnHeadersComponent in ColumnHeadersComponent in div (created by styled.div) in styled.div in div (created by TimelineBody) in TimelineBody

stephmilovic · 2020-12-18T20:48:51Z

...ck/plugins/security_solution/public/common/components/exceptions/builder/entry_item.test.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
 import { getFoundListSchemaMock } from '../../../../../../lists/common/schemas/response/found_list_schema.mock';
 import { getEmptyValue } from '../../empty_value';
+import { waitFor } from '@testing-library/dom';


the waitFors clear up a couple of these errors:

Warning: An update to AutocompleteFieldMatchAny inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in AutocompleteFieldMatchAny (created by BuilderEntryItem) in div (created by EuiFlexItem)

stephmilovic · 2020-12-18T20:49:32Z

x-pack/plugins/security_solution/public/common/components/last_updated/index.test.tsx

@@ -8,12 +8,18 @@ import { mount } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n/react';

 import { LastUpdatedAt } from './';
+jest.mock('@kbn/i18n/react', () => {


Clears up the following warning:

console.warn Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details. * Move data fetching code or side effects to componentDidUpdate. * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. Please update the following components: FormattedRelative

stephmilovic · 2020-12-18T20:50:38Z

x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx

@@ -71,7 +72,7 @@ describe('anomaly_scores', () => {
      </TestProviders>
    );
    wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());


Clears up the following warning:

console.error Warning: An update to ExplorerLink inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in ExplorerLink (created by AnomalyScoreComponent) in div (created by EuiFlexItem) in EuiFlexItem (created by AnomalyScoreComponent) in div (created by EuiFlexGroup) in EuiFlexGroup (created by AnomalyScoreComponent)

stephmilovic · 2020-12-18T20:51:06Z

x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx

@@ -134,7 +135,7 @@ describe('anomaly_scores', () => {
      </TestProviders>
    );
    wrapper.find('[data-test-subj="anomaly-score-popover"]').first().simulate('click');
-    wrapper.update();
+    await waitFor(() => wrapper.update());


Clears up the following warning:

Warning: An update to ExplorerLink inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in ExplorerLink (created by AnomalyScoreComponent) in div (created by EuiFlexItem) in EuiFlexItem (created by AnomalyScoreComponent) in div (created by EuiFlexGroup) in EuiFlexGroup (created by AnomalyScoreComponent)

stephmilovic · 2020-12-18T20:52:10Z

...lugins/security_solution/public/common/components/ml/score/create_descriptions_list.test.tsx

@@ -10,6 +10,7 @@ import { mockAnomalies } from '../mock';
 import { createDescriptionList } from './create_description_list';
 import { EuiDescriptionList } from '@elastic/eui';
 import { Anomaly } from '../types';
+import { waitFor } from '@testing-library/dom';


Clears up the following error:

Warning: An update to ExplorerLink inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in ExplorerLink in div (created by EuiFlexItem) in EuiFlexItem in div (created by EuiFlexGroup) in EuiFlexGroup in dd (created by EuiDescriptionListDescription) in EuiDescriptionListDescription (created by EuiDescriptionList) in dl (created by EuiDescriptionList) in EuiDescriptionList (created by WrapperComponent)

stephmilovic · 2020-12-18T20:53:44Z

...ns/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx

      return outline ? (
        <EuiButton data-test-subj={`${dataTestSubjPrefix}-with-border`} {...buttonProps}>
          {title}
        </EuiButton>
      ) : (
-        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...buttonProps}>
+        <EuiButtonEmpty data-test-subj={dataTestSubjPrefix} color="text" {...propsWithoutFill}>


Clears the following error from the test for this file:

Warning: Received `true` for a non-boolean attribute `fill`. If you want to write it to the DOM, pass a string instead: fill="true" or fill={value.toString()}. in button (created by EuiButtonEmpty) in EuiButtonEmpty (created by WrapperComponent) in WrapperComponent

stephmilovic · 2020-12-18T20:55:37Z

x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx

@@ -23,6 +23,7 @@ import {
  getDataProviderFilter,
  TIMELINE_FILTER_DROP_AREA,
 } from './index';
+import { waitFor } from '@testing-library/dom';


clears the following error:

Warning: An update to null inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act in Unknown (created by Proxy) in Provider (created by App) in App (created by ErrorBoundary) in ErrorBoundary (created by DragDropContext) in DragDropContext (created by TestProvidersComponent) in ThemeProvider (created by TestProvidersComponent) in Provider (created by TestProvidersComponent) in ApolloProvider (created by TestProvidersComponent) in Provider in Unknown (created by TestProvidersComponent) in PseudoLocaleWrapper (created by I18nProvider) in IntlProvider (created by I18nProvider) in I18nProvider (created by TestProvidersComponent) in TestProvidersComponent (created by Proxy) in Proxy (created by WrapperComponent) in WrapperComponent

cnasikas

LGTM! Thanks for doing this!! 🚀

cnasikas · 2020-12-21T08:01:14Z

@elasticmachine merge upstream

banderror

🙏

kibanamachine · 2020-12-21T10:17:08Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 91e76a3

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	8.5MB	8.5MB	+809.0B

Distributable file count

id	before	after	diff
`default`	47142	47902	+760