test: replacing shallow snapshots with RTL (#2266)

Author: jacobo-dominguez-wgu

src/editors/Placeholder.test.jsx

@@ -1,36 +1,12 @@
 import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import TestRenderer from 'react-test-renderer';
-import { AppContext } from '@edx/frontend-platform/react';
-import { Context as ResponsiveContext } from 'react-responsive';
+import { render, initializeMocks, screen } from '@src/testUtils';
 
 import Placeholder from './Placeholder';
 
 describe('<Placeholder />', () => {
+  beforeEach(() => initializeMocks());
   it('renders correctly', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: {
-                LMS_BASE_URL: process.env.LMS_BASE_URL,
-                SITE_NAME: process.env.SITE_NAME,
-                LOGIN_URL: process.env.LOGIN_URL,
-                LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_URL: process.env.LOGO_URL,
-              },
-            }}
-          >
-            <Placeholder />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    render(<Placeholder />);
+    expect(screen.getByText(/Under Construction/)).toBeInTheDocument();
   });
 });

src/editors/__snapshots__/Placeholder.test.jsx.snap

@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react';
+import {
+  render, fireEvent, act, screen,
+} from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { configureStore } from '@reduxjs/toolkit';
@@ -53,7 +55,10 @@ describe('VideoUploader', () => {
   });
 
   it('renders as expected with default behavior', async () => {
-    expect(await renderComponent(store, setLoadingMock)).toMatchSnapshot();
+    await renderComponent(store);
+    expect(screen.getByPlaceholderText('Paste your video ID or URL')).toBeInTheDocument();
+    expect(screen.getByText('Drag and drop video here or click to upload')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
   });
 
   it('calls onURLUpload when URL submit button is clicked', async () => {