Merge pull request #77 from selbekk/add-react-17-support

Add react 17 support

Author: selbekk

.babelrc

@@ -1,8 +1,7 @@
 {
-    "presets": ["react", "env"],
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
     "plugins": [
-        "transform-class-properties",
-        "transform-es2015-modules-umd",
-        "transform-object-rest-spread"
+        "@babel/plugin-proposal-class-properties"
+        
     ]
 }

package.json

@@ -3,7 +3,11 @@
     "version": "0.0.0-semantically-released",
     "description": "A red hot validation library for React",
     "main": "dist/index.js",
-    "keywords": ["validation", "react", "react validation"],
+    "keywords": [
+        "validation",
+        "react",
+        "react validation"
+    ],
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -14,38 +18,40 @@
         "build": "babel --out-dir dist --ignore *.spec.js src",
         "precommit": "pretty-quick --staged",
         "commit": "git-cz",
-        "test": "jest",
-        "test:watch": "jest --watch --coverage",
+        "test": "jest src",
+        "test:watch": "jest --watch --coverage src",
         "test:coverage": "jest --coverage",
         "semantic-release": "semantic-release",
         "travis-deploy-once": "travis-deploy-once"
     },
     "devDependencies": {
-        "babel-cli": "^6.26.0",
-        "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0",
-        "babel-preset-env": "^1.6.1",
-        "babel-preset-react": "^6.24.1",
+        "@babel/cli": "^7.13.0",
+        "@babel/core": "^7.13.8",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/preset-env": "^7.13.8",
+        "@babel/preset-react": "^7.12.13",
+        "@testing-library/react": "^11.2.5",
         "commitizen": "^2.9.6",
         "cz-conventional-changelog": "^2.1.0",
-        "dom-testing-library": "^1.1.0",
         "husky": "^0.14.3",
-        "jest": "^22.4.3",
+        "jest": "^26.6.3",
         "prettier": "^1.11.1",
         "pretty-quick": "^1.4.1",
-        "react": "^16.3.1",
-        "react-dom": "^16.3.1",
-        "react-testing-library": "^6.0.0",
+        "react": "17",
+        "react-dom": "17",
+        "regenerator-runtime": "^0.13.7",
         "rimraf": "^2.6.2",
         "semantic-release": "^15.1.5",
         "travis-deploy-once": "^4.4.1"
     },
     "peerDependencies": {
-        "react": "^16.3.1",
-        "react-dom": "^16.3.1"
+        "react": "^16.3.1 || 17.x",
+        "react-dom": "^16.3.1 || 17.x"
     },
-    "files": ["README.md", "dist"],
+    "files": [
+        "README.md",
+        "dist"
+    ],
     "config": {
         "commitizen": {
             "path": "node_modules/cz-conventional-changelog"

src/__tests__/integration-tests.spec.js

@@ -1,8 +1,7 @@
+import { cleanup, fireEvent, render } from '@testing-library/react';
 import React, { Fragment } from 'react';
-import { render, fireEvent, cleanup } from 'react-testing-library';
-
-import { Form, Validation, FormValidation, ValidatorsProvider } from '..';
-
+import { Form, FormValidation, Validation, ValidatorsProvider } from '..';
+import 'regenerator-runtime';
 const ExampleForm = ({ fields, errors }) => (
     <Fragment>
         <div>
@@ -41,6 +40,7 @@ const ExampleForm = ({ fields, errors }) => (
                 <span data-testid="delayed-error">{errors.delayed}</span>
             )}
         </div>
+        <input type="reset" data-testid="reset-button" value="Reset" />
     </Fragment>
 );
 
@@ -116,13 +116,13 @@ describe('<FormValidation />', () => {
 
     it('calls the onReset prop', () => {
         const resetSpy = jest.fn();
-        const { container } = render(
+        const { getByTestId } = render(
             <FormValidation config={exampleConfig} onReset={resetSpy}>
                 {props => <ExampleForm {...props} />}
             </FormValidation>,
         );
 
-        fireEvent(container.querySelector('form'), new Event('reset'));
+        fireEvent.click(getByTestId('reset-button'));
 
         expect(resetSpy).toHaveBeenCalledTimes(1);
     });
@@ -161,7 +161,7 @@ describe('<FormValidation />', () => {
 
     it('calls the onUpdate prop with the correct params', () => {
         const updateSpy = jest.fn();
-        const { container, getByLabelText } = render(
+        const { getByTestId, getByLabelText } = render(
             <FormValidation config={exampleConfig} onUpdate={updateSpy}>
                 {props => <ExampleForm {...props} />}
             </FormValidation>,
@@ -213,7 +213,7 @@ describe('<FormValidation />', () => {
             submitted: false,
         });
 
-        fireEvent(container.querySelector('form'), new Event('reset'));
+        fireEvent.click(getByTestId('reset-button'));
 
         expect(updateSpy).toHaveBeenCalledTimes(3); // reset
         expect(updateSpy).toHaveBeenCalledWith({