Update to react@16.9.0-alpha.0 and use react-testing-library instead …

…of react-test-renderer. For async act support. See facebook/react#14769 It should be updated to stable version in future.
turris-cz · Apr 13, 2019 · a1855fc · a1855fc
1 parent 38adb13
commit a1855fc
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 170 deletions.
diff --git a/js/.babelrc b/js/.babelrc
@@ -1,3 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
+  ]
+}
diff --git a/js/jest.config.js b/js/jest.config.js
@@ -13,4 +13,5 @@ module.exports = {
     setupFiles: ['<rootDir>/src/testUtils/setupGlobals.js'],
     testPathIgnorePatterns: ['\\\\node_modules\\\\'],
     verbose: false,
-};
+    setupFilesAfterEnv: ['react-testing-library/cleanup-after-each',]
+};
diff --git a/js/package.json b/js/package.json
@@ -14,21 +14,22 @@
     "immutability-helper": "^3.0.0",
     "po2json": "^1.0.0-alpha",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.7.0",
+    "react": "^16.9.0-alpha.0",
+    "react-dom": "^16.9.0-alpha.0",
     "react-uid": "^2.2.0",
     "recompose": "^0.30.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "babel-jest": "^24.7.1",
     "babel-plugin-react-transform": "^3.0.0",
     "babelify": "^10.0.0",
     "jest": "^24.7.1",
-    "react-test-renderer": "^16.8.6",
+    "react-testing-library": "^6.1.2",
     "watchify": "^3.11.1"
   },
   "scripts": {

diff --git a/js/src/bootstrap/__tests__/Button.test.js b/js/src/bootstrap/__tests__/Button.test.js
@@ -5,29 +5,24 @@
  * See /LICENSE for more information.
  */
 
-import renderer from 'react-test-renderer';
 import React from 'react';
+import {render} from 'react-testing-library'
+
 import Button from '../Button'
 
 describe('<Button />', () => {
     it('Render button correctly', () => {
-        const tree = renderer
-            .create(<Button>Test Button</Button>)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(<Button>Test Button</Button>);
+        expect(container.firstChild).toMatchSnapshot()
     });
 
     it('Render button with custom classes', () => {
-        const tree = renderer
-            .create(<Button className="one two three">Test Button</Button>)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(<Button className="one two three">Test Button</Button>)
+        expect(container.firstChild).toMatchSnapshot()
     });
 
     it('Render button with spinner', () => {
-        const tree = renderer
-            .create(<Button loading={true}>Test Button</Button>)
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(<Button loading={true}>Test Button</Button>)
+        expect(container.firstChild).toMatchSnapshot()
     });
 });
diff --git a/js/src/bootstrap/__tests__/Checkbox.test.js b/js/src/bootstrap/__tests__/Checkbox.test.js
@@ -5,33 +5,31 @@
  * See /LICENSE for more information.
  */
 
-import renderer from 'react-test-renderer';
 import React from 'react';
+import {render} from 'react-testing-library'
+
 import Checkbox from '../Checkbox'
 
 describe('<Checkbox/>', () => {
     it('Render checkbox', () => {
-        const tree = renderer
-            .create(
-                <Checkbox
-                    label="Test label"
-                    checked
-                    helpText="Some help text"
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <Checkbox
+                label="Test label"
+                checked
+                helpText="Some help text"
+                onChange={()=>{}}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 
     it('Render uncheked checkbox', () => {
-        const tree = renderer
-            .create(
-                <Checkbox
-                    label="Test label"
-                    helpText="Some help text"
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <Checkbox
+                label="Test label"
+                helpText="Some help text"
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 });
diff --git a/js/src/bootstrap/__tests__/NumberInput.test.js b/js/src/bootstrap/__tests__/NumberInput.test.js
@@ -5,23 +5,22 @@
  * See /LICENSE for more information.
  */
 
+import React from 'react';
+import {render} from 'react-testing-library'
 
-import renderer from 'react-test-renderer';
 import NumberInput from '../PasswordInput';
-import React from 'react';
 
 describe('<PasswordInput/>', () => {
     it('Render number input', () => {
-        const tree = renderer
-            .create(
-                <NumberInput
-                    label="Test label"
-                    checked
-                    helpText="Some help text"
-                    value={1123}
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <NumberInput
+                label="Test label"
+                helpText="Some help text"
+                value={1123}
+                onChange={() => {
+                }}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 });
diff --git a/js/src/bootstrap/__tests__/PasswordInput.test.js b/js/src/bootstrap/__tests__/PasswordInput.test.js
@@ -4,23 +4,23 @@
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
-import renderer from 'react-test-renderer';
-import PasswordInput from '../PasswordInput';
+
 import React from 'react';
+import {render} from 'react-testing-library'
+
+import PasswordInput from '../PasswordInput';
 
 describe('<PasswordInput/>', () => {
     it('Render password input', () => {
-        const tree = renderer
-            .create(
-                <PasswordInput
-                    label="Test label"
-                    checked
-                    helpText="Some help text"
-                    value="Some password"
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <PasswordInput
+                label="Test label"
+                helpText="Some help text"
+                value="Some password"
+                onChange={() => {
+                }}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
-
 });
diff --git a/js/src/bootstrap/__tests__/RadioSet.test.js b/js/src/bootstrap/__tests__/RadioSet.test.js
@@ -5,9 +5,10 @@
  * See /LICENSE for more information.
  */
 
-import renderer from 'react-test-renderer';
-import RadioSet from '../RadioSet';
 import React from 'react';
+import {render} from 'react-testing-library'
+
+import RadioSet from '../RadioSet';
 
 const TEST_CHOICES = [
     {label: 'label', value: 'value'},
@@ -17,17 +18,17 @@ const TEST_CHOICES = [
 
 describe('<RadioSet/>', () => {
     it('Render radio set', () => {
-        const tree = renderer
-            .create(
-                <RadioSet
-                    name={'test_name'}
-                    label='Radios set label'
-                    value='value'
-                    choices={TEST_CHOICES}
-                    helpText={'Some help text'}
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <RadioSet
+                name={'test_name'}
+                label='Radios set label'
+                value='value'
+                choices={TEST_CHOICES}
+                helpText={'Some help text'}
+                onChange={() => {
+                }}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 });
diff --git a/js/src/bootstrap/__tests__/Select.test.js b/js/src/bootstrap/__tests__/Select.test.js
@@ -5,9 +5,10 @@
  * See /LICENSE for more information.
  */
 
-import renderer from 'react-test-renderer';
-import Select from '../Select';
 import React from 'react';
+import {render} from 'react-testing-library';
+
+import Select from '../Select';
 
 const TEST_CHOICES = {
     key1: 'value1',
@@ -17,16 +18,16 @@ const TEST_CHOICES = {
 
 describe('<Select/>', () => {
     it('Render select', () => {
-        const tree = renderer.create(
+        const {container} = render(
             <Select
                 label='Test label'
                 value='value'
                 choices={TEST_CHOICES}
                 helpText={'Help text'}
+                onChange={() => {
+                }}
             />
-        )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
-
 });
diff --git a/js/src/bootstrap/__tests__/TextInput.test.js b/js/src/bootstrap/__tests__/TextInput.test.js
@@ -5,22 +5,22 @@
  * See /LICENSE for more information.
  */
 
-import renderer from 'react-test-renderer';
-import TextInput from '../TextInput';
 import React from 'react';
+import {render} from 'react-testing-library';
+
+import TextInput from '../TextInput';
 
 describe('<TextInput/>', () => {
     it('Render text input', () => {
-        const tree = renderer
-            .create(
-                <TextInput
-                    label="Test label"
-                    checked
-                    helpText="Some help text"
-                    value="Some text"
-                />
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
+        const {container} = render(
+            <TextInput
+                label="Test label"
+                helpText="Some help text"
+                value="Some text"
+                onChange={() => {
+                }}
+            />
+        );
+        expect(container.firstChild).toMatchSnapshot();
     });
 });
diff --git a/js/src/bootstrap/__tests__/__snapshots__/Button.test.js.snap b/js/src/bootstrap/__tests__/__snapshots__/Button.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Button /> Render button correctly 1`] = `
 <button
-  className="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+  class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
 >
    
    
@@ -12,7 +12,7 @@ exports[`<Button /> Render button correctly 1`] = `
 
 exports[`<Button /> Render button with custom classes 1`] = `
 <button
-  className="btn one two three offset-lg-8 col-lg-3 col-sm-12"
+  class="btn one two three offset-lg-8 col-lg-3 col-sm-12"
 >
    
    
@@ -22,11 +22,11 @@ exports[`<Button /> Render button with custom classes 1`] = `
 
 exports[`<Button /> Render button with spinner 1`] = `
 <button
-  className="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
+  class="btn btn-primary  offset-lg-8 col-lg-3 col-sm-12"
 >
   <span
     aria-hidden="true"
-    className="spinner-border spinner-border-sm"
+    class="spinner-border spinner-border-sm"
     role="status"
   />