Migrate enzyme Matrix tests to React Testing Library (#6762)

sulu · Aug 3, 2022 · 5c4c3fa · 5c4c3fa
1 parent e35b8ac
commit 5c4c3fa
Show file tree

Hide file tree

Showing 2 changed files with 339 additions and 323 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Matrix/tests/Matrix.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Matrix/tests/Matrix.test.js
@@ -1,5 +1,5 @@
 // @flow
-import {render, mount} from 'enzyme';
+import {fireEvent, render, screen} from '@testing-library/react';
 import React from 'react';
 import Matrix from '../Matrix';
 import Row from '../Row';
@@ -24,8 +24,7 @@ jest.mock('../../../utils/Translator', () => ({
 
 test('Render the Matrix component', () => {
     const handleChange = jest.fn();
-
-    expect(render(
+    const {container} = render(
         <Matrix className="test" onChange={handleChange}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -40,7 +39,9 @@ test('Render the Matrix component', () => {
                 <Item icon="su-plus" name="edit" />
             </Row>
         </Matrix>
-    )).toMatchSnapshot();
+    );
+
+    expect(container).toMatchSnapshot();
 });
 
 test('Render the Matrix component with values', () => {
@@ -60,7 +61,7 @@ test('Render the Matrix component with values', () => {
         },
     };
 
-    expect(render(
+    const {container} = render(
         <Matrix onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -75,7 +76,9 @@ test('Render the Matrix component with values', () => {
                 <Item icon="su-plus" name="edit" />
             </Row>
         </Matrix>
-    )).toMatchSnapshot();
+    );
+
+    expect(container).toMatchSnapshot();
 });
 
 test('Render the Matrix component with values in disabled state', () => {
@@ -95,7 +98,7 @@ test('Render the Matrix component with values in disabled state', () => {
         },
     };
 
-    expect(render(
+    const {container} = render(
         <Matrix disabled={true} onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -110,7 +113,9 @@ test('Render the Matrix component with values in disabled state', () => {
                 <Item icon="su-plus" name="edit" />
             </Row>
         </Matrix>
-    )).toMatchSnapshot();
+    );
+
+    expect(container).toMatchSnapshot();
 });
 
 test('Changing a value should call onChange ', () => {
@@ -130,7 +135,7 @@ test('Changing a value should call onChange ', () => {
         },
     };
 
-    const matrix = mount(
+    render(
         <Matrix onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -162,7 +167,9 @@ test('Changing a value should call onChange ', () => {
         },
     };
 
-    matrix.find(Item).at(3).simulate('click');
+    // eslint-disable-next-line testing-library/no-node-access
+    const item = screen.queryAllByLabelText('su-pen')[1].parentElement;
+    fireEvent.click(item);
     expect(handleChange).toHaveBeenCalledWith(expectedValues);
 });
 
@@ -183,7 +190,7 @@ test('Deactivate all button should call onChange', () => {
         },
     };
 
-    const matrix = mount(
+    render(
         <Matrix onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -215,7 +222,8 @@ test('Deactivate all button should call onChange', () => {
         },
     };
 
-    matrix.find('.rowButton').at(0).simulate('click');
+    const disableRowButton = screen.queryAllByText('Deactivate all')[0];
+    fireEvent.click(disableRowButton);
     expect(handleChange).toHaveBeenCalledWith(expectedValues);
 });
 
@@ -236,7 +244,7 @@ test('Activate all button should call onChange', () => {
         },
     };
 
-    const matrix = mount(
+    render(
         <Matrix onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -268,7 +276,8 @@ test('Activate all button should call onChange', () => {
         },
     };
 
-    matrix.find('.rowButton').at(0).simulate('click');
+    const activateRowButton = screen.queryAllByText('Activate all')[0];
+    fireEvent.click(activateRowButton);
     expect(handleChange).toHaveBeenCalledWith(expectedValues);
 });
 
@@ -285,7 +294,7 @@ test('Activate all button should call onChange with all values, even when the va
         },
     };
 
-    const matrix = mount(
+    render(
         <Matrix onChange={handleChange} values={values}>
             <Row name="global.articles" title="articles">
                 <Item icon="su-pen" name="view" />
@@ -317,6 +326,7 @@ test('Activate all button should call onChange with all values, even when the va
         },
     };
 
-    matrix.find('.rowButton').at(2).simulate('click');
+    const activateRowButton = screen.queryAllByText('Activate all')[1];
+    fireEvent.click(activateRowButton);
     expect(handleChange).toHaveBeenCalledWith(expectedValues);
 });