From eaba380417d9782d9aaf28798a1b4bfbad6d1ce1 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 10 Jul 2025 17:47:20 -0600 Subject: [PATCH] test: replacing shallow snapshots with RTL (#2266) --- src/editors/Placeholder.test.jsx | 32 +- .../__snapshots__/Placeholder.test.jsx.snap | 13 - .../VideoUploadEditor/VideoUploader.test.jsx | 9 +- .../__snapshots__/VideoUploader.test.jsx.snap | 384 ----------------- .../__snapshots__/index.test.jsx.snap | 392 ------------------ .../VideoUploadEditor/index.test.jsx | 5 +- .../__snapshots__/index.test.jsx.snap | 11 - .../sharedComponents/FileInput/index.test.jsx | 4 +- .../tests/SelectableBox.test.jsx | 8 +- .../__snapshots__/SelectableBox.test.jsx.snap | 22 - 10 files changed, 19 insertions(+), 861 deletions(-) delete mode 100644 src/editors/__snapshots__/Placeholder.test.jsx.snap delete mode 100644 src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap delete mode 100644 src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap delete mode 100644 src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap delete mode 100644 src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap diff --git a/src/editors/Placeholder.test.jsx b/src/editors/Placeholder.test.jsx index 186bc9d78..45fb5e29d 100644 --- a/src/editors/Placeholder.test.jsx +++ b/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('', () => { + beforeEach(() => initializeMocks()); it('renders correctly', () => { - const component = ( - - - - - - - - ); - - const wrapper = TestRenderer.create(component); - - expect(wrapper.toJSON()).toMatchSnapshot(); + render(); + expect(screen.getByText(/Under Construction/)).toBeInTheDocument(); }); }); diff --git a/src/editors/__snapshots__/Placeholder.test.jsx.snap b/src/editors/__snapshots__/Placeholder.test.jsx.snap deleted file mode 100644 index f504cf063..000000000 --- a/src/editors/__snapshots__/Placeholder.test.jsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders correctly 1`] = ` -
-

- Under Construction -
- Coming Soon -

-
-`; diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx index 90838d507..47157470a 100644 --- a/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx +++ b/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx @@ -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 () => { diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap deleted file mode 100644 index d79a17544..000000000 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap +++ /dev/null @@ -1,384 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`VideoUploader renders as expected with default behavior 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
-
-
-
- -
- -
- , -
-
-
- , - "container":
-
-
-
-
- -
- -
- , -
-
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap deleted file mode 100644 index c63646500..000000000 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,392 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`VideoUploadEditor renders as expected with default behavior 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
-
-
-
-
- -
- -
-
- , -
-
-
- , - "container":
-
-
-
-
-
- -
- -
-
- , -
-
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/src/editors/containers/VideoUploadEditor/index.test.jsx b/src/editors/containers/VideoUploadEditor/index.test.jsx index 92b291c49..2bb94a813 100644 --- a/src/editors/containers/VideoUploadEditor/index.test.jsx +++ b/src/editors/containers/VideoUploadEditor/index.test.jsx @@ -3,7 +3,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n'; import { initializeMockApp } from '@edx/frontend-platform'; import { AppProvider } from '@edx/frontend-platform/react'; import { configureStore } from '@reduxjs/toolkit'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import VideoUploadEditor from '.'; @@ -44,7 +44,8 @@ describe('VideoUploadEditor', () => { }); it('renders as expected with default behavior', async () => { - expect(await renderComponent(store)).toMatchSnapshot(); + await renderComponent(store); + expect(screen.getByText('Drag and drop video here or click to upload')).toBeInTheDocument(); }); it('calls window.history.back when close button is clicked', async () => { diff --git a/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 454989b01..000000000 --- a/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FileInput component snapshot 1`] = ` -
- -
-`; diff --git a/src/editors/sharedComponents/FileInput/index.test.jsx b/src/editors/sharedComponents/FileInput/index.test.jsx index fd2f35436..8ce4e3af1 100644 --- a/src/editors/sharedComponents/FileInput/index.test.jsx +++ b/src/editors/sharedComponents/FileInput/index.test.jsx @@ -20,8 +20,8 @@ describe('FileInput component', () => { }; el = render(); }); - test('snapshot', () => { - expect(el.container).toMatchSnapshot(); + test('renders component', () => { + expect(el.container.querySelector('input[type="file"]')).toBeInTheDocument(); }); test('only accepts allowed file types', () => { expect(el.container.querySelector('input').accept).toEqual('.srt'); diff --git a/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx b/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx index 226c5a9f8..9e825869c 100644 --- a/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx +++ b/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import renderer from 'react-test-renderer'; import SelectableBox from '..'; @@ -18,10 +17,9 @@ const SelectableRadio = (props) => {r describe('', () => { describe('correct rendering', () => { it('renders without props', () => { - const tree = renderer.create(( - SelectableBox - )).toJSON(); - expect(tree).toMatchSnapshot(); + render(SelectableBox); + expect(screen.getByText('SelectableBox')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'SelectableBox' })).toBeInTheDocument(); }); it('correct render when type prop is changed', () => { const { rerender } = render(); diff --git a/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap b/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap deleted file mode 100644 index 96676cabf..000000000 --- a/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` correct rendering renders without props 1`] = ` -
- - SelectableBox -
-`;