test: migrate editors-non-ideal-state test to RTL

rtl-spec/components/editors-non-ideal-state.spec.tsx

@@ -1,23 +1,33 @@
-import { mount } from 'enzyme';
+import React from 'react';
 
-import { renderNonIdealState } from '../../src/renderer/components/editors-non-ideal-state';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RenderNonIdealState } from '../../src/renderer/components/editors-non-ideal-state';
 import { EditorMosaic } from '../../src/renderer/editor-mosaic';
 
-describe('renderNonIdealState()', () => {
+describe('RenderNonIdealState component', () => {
   let editorMosaic: EditorMosaic;
 
   beforeEach(() => {
     ({ editorMosaic } = window.app.state);
   });
 
   it('renders a non-ideal state', () => {
-    expect(renderNonIdealState({} as EditorMosaic)).toMatchSnapshot();
+    const { getByText } = render(
+      <RenderNonIdealState editorMosaic={{} as EditorMosaic} />,
+    );
+
+    expect(getByText('Reset editors')).toBeInTheDocument();
   });
 
-  it('handles a click', () => {
+  it('handles a click', async () => {
     const resetLayoutSpy = jest.spyOn(editorMosaic, 'resetLayout');
-    const wrapper = mount(renderNonIdealState(editorMosaic));
-    wrapper.find('button').simulate('click');
+    const { getByRole } = render(
+      <RenderNonIdealState editorMosaic={editorMosaic} />,
+    );
+    await userEvent.click(getByRole('button'));
+
     expect(resetLayoutSpy).toHaveBeenCalledTimes(1);
   });
 });

src/renderer/components/editors-non-ideal-state.tsx

@@ -4,7 +4,13 @@ import { Button, NonIdealState } from '@blueprintjs/core';
 
 import { EditorMosaic } from '../editor-mosaic';
 
-export function renderNonIdealState(editorMosaic: EditorMosaic) {
+type RenderNonIdealStateProps = {
+  editorMosaic: EditorMosaic;
+};
+
+export function RenderNonIdealState({
+  editorMosaic,
+}: RenderNonIdealStateProps) {
   const resolveButton = (
     <Button text="Reset editors" onClick={() => editorMosaic.resetLayout()} />
   );

src/renderer/components/editors.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-mosaic-component';
 
 import { Editor } from './editor';
-import { renderNonIdealState } from './editors-non-ideal-state';
+import { RenderNonIdealState } from './editors-non-ideal-state';
 import { MaximizeButton, RemoveButton } from './editors-toolbar-button';
 import { EditorId, SetFiddleOptions } from '../../interfaces';
 import { AppState } from '../state';
@@ -262,7 +262,7 @@ export const Editors = observer(
           className={`focused__${this.state.focused}`}
           onChange={this.onChange}
           value={editorMosaic.mosaic}
-          zeroStateView={renderNonIdealState(editorMosaic)}
+          zeroStateView={<RenderNonIdealState editorMosaic={editorMosaic} />}
           renderTile={this.renderTile}
         />
       );