fixed EntityData spec

app/react/Markdown/components/specs/EntityData.spec.tsx

@@ -1,75 +1,82 @@
 /**
  * @jest-environment jsdom
  */
-import React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { renderConnectedMount } from 'app/utils/test/renderConnected';
+import React, { act } from 'react';
+import { screen, RenderResult } from '@testing-library/react';
+import { renderConnectedContainer } from 'app/utils/test/renderConnected';
 import { state } from './fixture/state';
-import { EntityData } from '../EntityData';
+import { EntityData, EntityDataProps } from '../EntityData';
 
 describe('EntityData Markdown', () => {
-  let component: ReactWrapper<
-    Readonly<{}> & Readonly<{ children?: React.ReactNode }>,
-    Readonly<{}>,
-    React.Component<{}, {}, any>
-  >;
   let consoleErrorSpy: jasmine.Spy;
+  let renderResult: RenderResult;
 
   beforeEach(() => {
+    jest.clearAllMocks();
     consoleErrorSpy = jasmine.createSpy('consoleErrorSpy');
     spyOn(console, 'error').and.callFake(consoleErrorSpy);
+    global.fetch = jest.fn();
+    (global.fetch as jest.Mock).mockResolvedValue({ ok: true });
   });
 
-  const render = (innerComponent: any) => {
-    component = renderConnectedMount(() => innerComponent, state);
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  const render = async (props: EntityDataProps) => {
+    await act(async () => {
+      ({ renderResult } = renderConnectedContainer(<EntityData {...props} />, () => state));
+    });
   };
 
   describe('root properties Values', () => {
-    it('should print title and root dates from root of entity', () => {
-      render(<EntityData value-of="title" />);
-      expect(component.html()).toBe('Entity 1');
+    it('should print title and root dates from root of entity', async () => {
+      await render({ 'value-of': 'title' });
+      expect(screen.getByText('Entity 1')).toBeInTheDocument();
 
-      render(<EntityData value-of="creationDate" />);
-      expect(component.html()).toBe('1234');
+      await render({ 'value-of': 'creationDate' });
+      expect(screen.getByText('1234')).toBeInTheDocument();
     });
   });
 
   describe('metadata property Values', () => {
-    it('should print formatted metadata properties (sanitizing names)', () => {
-      render(<EntityData value-of="description" />);
-      expect(component.html()).toBe('A long description');
+    it('should print formatted metadata properties (sanitizing names)', async () => {
+      await render({ 'value-of': 'description' });
+      expect(screen.getByText('A long description')).toBeInTheDocument();
 
-      render(<EntityData value-of="date" />);
-      expect(component.html()).toBe('Jul 13, 1977');
+      await render({ 'value-of': 'date' });
+      expect(screen.getByText('Jul 13, 1977')).toBeInTheDocument();
 
-      render(<EntityData value-of="Main Image" />);
-      expect(component.html()).toContain('src="https://www.google.com"');
+      await render({ 'value-of': 'Main Image' });
+      expect(screen.getByRole('img').getAttribute('src')).toBe('https://www.google.com');
     });
   });
 
   describe('labels (property names)', () => {
-    it('should print translated labels (sanitizing names)', () => {
-      render(<EntityData label-of="title" />);
-      expect(component.html()).toContain('Title translated');
+    it('should print translated labels (sanitizing names)', async () => {
+      await render({ 'label-of': 'title' });
+      expect(screen.getByText('Title translated')).toBeInTheDocument();
 
-      render(<EntityData label-of="Main Image" />);
-      expect(component.html()).toContain('Main Image translated');
+      await render({ 'label-of': 'Main Image' });
+      expect(screen.getByText('Main Image translated')).toBeInTheDocument();
     });
   });
 
   describe('Error handling (until upstream implementation is implemented)', () => {
-    it('should fail if no value or propertyName is provided', () => {
-      render(<EntityData />);
-      expect(component.html()).toEqual('');
+    it('should fail if no value or propertyName is provided', async () => {
+      await render({});
+      //get the body
+      expect(renderResult.container.innerHTML).toBe('');
       expect(consoleErrorSpy).toHaveBeenCalledWith('Error on EntityData: ');
       expect(consoleErrorSpy.calls.all()[2].args[0].message).toBe(
         '"value-of" or "label-of" must be provided.'
       );
     });
 
-    it('should fail if both value and propertyName are provided', () => {
-      render(<EntityData value-of="something" label-of="something else" />);
-      expect(component.html()).toEqual('');
+    it('should fail if both value and propertyName are provided', async () => {
+      await render({ 'value-of': 'something', 'label-of': 'something else' });
+      //assert empty html
+      expect(renderResult.container.innerHTML).toBe('');
       expect(consoleErrorSpy).toHaveBeenCalledWith('Error on EntityData: ');
       expect(consoleErrorSpy.calls.all()[2].args[0].message).toBe(
         'Can\'t provide both "value-of" and "label-of".'

app/react/utils/test/renderConnected.tsx

@@ -5,7 +5,7 @@ import { InitialEntry } from '@remix-run/router';
 import { ConnectedComponent, Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import Immutable from 'immutable';
-import { render } from '@testing-library/react';
+import { render, RenderResult } from '@testing-library/react';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
 
 const middlewares = [thunk];
@@ -81,7 +81,7 @@ const renderConnectedContainer = (
 ) => {
   const store = configureStore<object>(middlewares)(stateFunc);
 
-  let renderResult;
+  let renderResult: RenderResult;
 
   switch (routerWrapper) {
     case 'BrowserRouter':