test: replacing shallow snapshots with RTL part 2 (#2267)

Author: jacobo-dominguez-wgu

package.json

@@ -15,7 +15,6 @@
     "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
     "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
-    "snapshot": "TZ=UTC fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",

src/editors/sharedComponents/SelectableBox/tests/SelectableBoxSet.test.jsx

@@ -41,8 +41,9 @@ const SelectableRadioSet = (props) => (
 describe('<SelectableBox.Set />', () => {
   describe('correct rendering', () => {
     it('renders without props', () => {
-      const { container } = render(<SelectableRadioSet name="testName" />);
-      expect(container).toMatchSnapshot();
+      render(<SelectableRadioSet name="testName" />);
+      expect(screen.getAllByRole('button')).toHaveLength(3);
+      [1, 2, 3].forEach((item) => expect(screen.getByText(`SelectableRadio${item}`)).toBeInTheDocument());
     });
     it('forwards props', () => {
       render((<SelectableRadioSet name="testName" data-testid="test-radio-set-name" />));

src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap

@@ -51,9 +51,9 @@ describe('CoursesFilterMenu', () => {
     });
   });
 
-  it('snapshot', () => {
+  it('renders component', () => {
     const { container } = renderComponent();
-    expect(container).toMatchSnapshot();
+    expect(container.querySelector('.dropdown')).toBeInTheDocument();
   });
 
   it('should render without crashing', () => {

src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap

@@ -41,9 +41,9 @@ describe('CoursesTypesFilterMenu', () => {
     });
   });
 
-  it('snapshot', () => {
-    const { container } = renderComponent();
-    expect(container).toMatchSnapshot();
+  it('renders component', () => {
+    renderComponent();
+    expect(screen.getByText('Name A-Z')).toBeInTheDocument();
   });
 
   it('should render without crashing', () => {

src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap

@@ -42,9 +42,9 @@ describe('CoursesTypesFilterMenu', () => {
     });
   });
 
-  it('snapshot', () => {
-    const { container } = renderComponent();
-    expect(container).toMatchSnapshot();
+  it('renders component', () => {
+    renderComponent();
+    expect(screen.getByText('All courses')).toBeInTheDocument();
   });
 
   it('should render without crashing', () => {