Merge pull request #22 from renchap/upgrade-packages

Upgraded to latest packages

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 node_js:
-  - "8"
+  - "10"
+  - "12"
 
 cache: yarn
 

package.json

@@ -8,13 +8,14 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
+  "sideEffects": false,
   "engines": {
     "node": ">=8",
     "npm": ">=5"
   },
   "scripts": {
-    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
-    "test:watch": "react-scripts-ts test --env=jsdom",
+    "test": "cross-env CI=1 jest",
+    "test:watch": "jest --watch",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
@@ -28,30 +29,27 @@
     "react-dom": "^16.8.3"
   },
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
-    "@types/jest": "^23.1.5",
+    "@rollup/plugin-typescript": "^3.0.0",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^25.1.3",
     "@types/react": "^16.3.13",
     "@types/react-dom": "^16.0.5",
-    "babel-core": "^6.26.3",
-    "babel-runtime": "^6.26.0",
-    "cross-env": "^5.1.4",
-    "gh-pages": "^1.2.0",
-    "jest-dom": "^2.1.1",
+    "cross-env": "^7.0.0",
+    "gh-pages": "^2.2.0",
+    "jest": "^25.1.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-scripts-ts": "^2.16.0",
-    "react-testing-library": "^5.3.1",
-    "rollup": "^0.62.0",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup": "^1.31.1",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-typescript2": "^0.17.0",
-    "rollup-plugin-url": "^1.4.0",
-    "typescript": "^3.1.6"
+    "ts-jest": "^25.2.1",
+    "tslib": "^1.11.0",
+    "typescript": "^3.8.2"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "jest": {
+    "preset": "ts-jest"
+  }
 }

rollup.config.js

@@ -1,11 +1,5 @@
-import typescript from 'rollup-plugin-typescript2'
-import commonjs from 'rollup-plugin-commonjs'
+import typescript from '@rollup/plugin-typescript';
 import external from 'rollup-plugin-peer-deps-external'
-// import postcss from 'rollup-plugin-postcss-modules'
-import postcss from 'rollup-plugin-postcss'
-import resolve from 'rollup-plugin-node-resolve'
-import url from 'rollup-plugin-url'
-import svgr from '@svgr/rollup'
 
 import pkg from './package.json'
 
@@ -27,16 +21,6 @@ export default {
   ],
   plugins: [
     external(),
-    postcss({
-      modules: true
-    }),
-    url(),
-    svgr(),
-    resolve(),
-    typescript({
-      rollupCommonJSResolveHack: true,
-      clean: true
-    }),
-    commonjs()
+    typescript()
   ]
 }

src/ModalContext.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 /**
  * Modals are represented as react components

src/ModalProvider.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState, useMemo } from "react";
+import { useCallback, useState, useMemo } from "react";
+import * as React from "react";
 import { ModalType, ModalContext } from "./ModalContext";
 import { ModalRoot } from "./ModalRoot";
 
@@ -34,7 +35,7 @@ export const ModalProvider = ({
 }: ModalProviderProps) => {
   if (container && !(container instanceof HTMLElement)) {
     throw new Error(`Container must specify DOM element to mount modal root into.
-    
+
     This behavior has changed in 3.0.0. Please use \`rootComponent\` prop instead.
     See: https://github.com/mpontus/react-modal-hook/issues/18`);
   }

src/ModalRoot.tsx

@@ -1,5 +1,6 @@
-import React, { memo, useState, useEffect } from "react";
-import ReactDOM from "react-dom";
+import { memo, useState, useEffect } from "react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { ModalType } from "./ModalContext";
 
 /**

src/__tests__/ModalProvider.tsx

@@ -1,12 +1,11 @@
-import React from "react";
+import * as React from "react";
 import {
   cleanup,
   render,
   fireEvent,
-  flushEffects
-} from "react-testing-library";
+} from "@testing-library/react";
 import { ModalProvider, useModal } from "..";
-import "jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 
 afterEach(cleanup);
 
@@ -38,7 +37,6 @@ describe("custom container prop", () => {
     );
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     expect(getByTestId("custom-root")).toContainElement(
       getByText("This is a modal")
@@ -57,7 +55,6 @@ describe("custom container prop", () => {
     );
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     expect(customRoot).toContainElement(getByText("This is a modal"));
   });
@@ -69,7 +66,6 @@ describe("custom container prop", () => {
           <App />
         </ModalProvider>
       );
-      flushEffects();
     }).toThrowError(
       expect.objectContaining({
         message: expect.stringMatching(

src/__tests__/ModalRoot.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as React from 'react';
+import { renderToString} from 'react-dom/server';
 import { ModalRoot } from '../ModalRoot';
 
 describe("Modal Root", () => {
   it("should render safely in server-side environment", () => {
-    const output = ReactDOMServer.renderToString(<ModalRoot modals={{}} />);
+    const output = renderToString(<ModalRoot modals={{}} />);
 
     expect(output).toBe("");
   })
-})
+})

src/__tests__/useModal.tsx

@@ -1,18 +1,20 @@
-import "react-testing-library/cleanup-after-each";
-import React, { useState } from "react";
-import { render, fireEvent, flushEffects } from "react-testing-library";
+import * as React from "react";
+import { useState } from "react";
+
+import { render, fireEvent, RenderOptions } from "@testing-library/react";
+
 import { ModalProvider } from "../ModalProvider";
 import { useModal } from "../useModal";
 
 // Helper to render components in modal context
-const renderWithProvider: typeof render = (ui, options) => {
+const renderWithProvider = (ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>) => {
   const result = render(<ModalProvider>{ui}</ModalProvider>, options);
 
   return {
     ...result,
 
     // Override rerender to only update children of the provider
-    rerender: ui => renderWithProvider(ui, { container: result.container })
+    rerender: (ui: React.ReactElement) => renderWithProvider(ui, { container: result.container })
   };
 };
 
@@ -32,7 +34,6 @@ describe("simple usage", () => {
     const { getByText, queryByText } = renderWithProvider(<App />);
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     expect(queryByText("Modal content")).toBeTruthy();
   });
@@ -41,10 +42,8 @@ describe("simple usage", () => {
     const { getByText, queryByText } = renderWithProvider(<App />);
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     fireEvent.click(getByText("Hide modal"));
-    flushEffects();
 
     expect(queryByText("Modal content")).not.toBeTruthy();
   });
@@ -57,10 +56,8 @@ describe("simple usage", () => {
     );
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     rerender(<div />);
-    flushEffects();
 
     expect(queryByText("Modal content")).not.toBeTruthy();
   });
@@ -86,12 +83,10 @@ describe("updating modal", () => {
     const { getByText, queryByText } = renderWithProvider(<App />);
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     expect(queryByText("The count is 0")).toBeTruthy();
 
     fireEvent.click(getByText("Increment"));
-    flushEffects();
 
     expect(queryByText("The count is 1")).toBeTruthy();
   });
@@ -115,12 +110,10 @@ describe("updating modal", () => {
     const { getByText, queryByText } = renderWithProvider(<App />);
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     expect(queryByText("The count is 0")).toBeTruthy();
 
     fireEvent.click(getByText("Increment"));
-    flushEffects();
 
     expect(queryByText("The count is 1")).toBeTruthy();
   });
@@ -157,10 +150,8 @@ describe("updating modal", () => {
     const { getByText } = renderWithProvider(<App />);
 
     fireEvent.click(getByText("Show modal"));
-    flushEffects();
 
     fireEvent.click(getByText("Increment"));
-    flushEffects();
 
     expect(mountCounter).toHaveBeenCalledTimes(1);
   });
@@ -184,48 +175,30 @@ describe("multiple modals", () => {
 
     fireEvent.click(getByText("Show first modal"));
     fireEvent.click(getByText("Show second modal"));
-    flushEffects();
 
     expect(queryByText("First modal content")).toBeTruthy();
     expect(queryByText("Second modal content")).toBeTruthy();
   });
 });
 
 describe("calling useModal without ModalProvider", () => {
-  class ErrorBoundary extends React.Component {
-    static getDerivedStateFromError() {}
-
-    componentDidCatch() {}
-
-    render() {
-      return this.props.children;
-    }
-  }
-
   const App = () => {
     useModal(() => <div>Modal content</div>);
 
     return null;
   };
 
   it("should throw an error", () => {
-    const catchError = jest.fn((e: Event) => e.preventDefault());
-    window.addEventListener("error", catchError);
+    const consoleError = jest.fn()
+    jest.spyOn(console, 'error').mockImplementation(consoleError);
 
-    render(
-      <ErrorBoundary>
-        <App />
-      </ErrorBoundary>
+    expect(
+      () => render(<App />)
+    ).toThrow(
+      new Error("Attempted to call useModal outside of modal context. Make sure your app is rendered inside ModalProvider.")
     );
-    flushEffects();
 
-    expect(catchError).toHaveBeenCalledWith(
-      expect.objectContaining({
-        message: expect.stringMatching(
-          /Attempted to call useModal outside of modal context/
-        )
-      })
-    );
+    expect(consoleError).toHaveBeenCalled();
   });
 });
 

tsconfig.json

@@ -20,5 +20,12 @@
     "allowSyntheticDefaultImports": true
   },
   "include": ["src"],
-  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "example",
+    "rollup.config.js",
+    "__tests__"
+  ]
 }