Merge pull request #1 from amplexus/react-17-support

neptunian#205 support for react 17

__test__/Gallery.test.js

@@ -1,40 +1,39 @@
-import React from 'react';
-import Gallery from '../src/Gallery';
-import { photos } from './test-photo-data';
-import { mount } from 'enzyme';
+import React from "react";
+import Gallery from "../src/Gallery";
+import { photos } from "./test-photo-data";
+import { mount } from "enzyme";
 
 const handleClick = jest.fn();
 
-describe('Gallery', () => {
+describe("Gallery", () => {
   let wrapper;
   afterEach(() => {
     if (wrapper && wrapper.length > 0) {
       wrapper.unmount();
     }
   });
 
-  it('it matches correct snapshot', () => {
-    wrapper = mount(<Gallery photos={photos} onClick={handleClick} />);
+  it("it matches correct snapshot", () => {
+    wrapper = mount(<Gallery photos={photos} onClick={handleClick} />, { attachTo: document.body });
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('calls onClick handler', () => {
-    wrapper = mount(<Gallery photos={photos} onClick={handleClick} />);
-    wrapper
-      .find('img')
-      .first()
-      .simulate('click');
+  it("calls onClick handler", () => {
+    wrapper = mount(<Gallery photos={photos} onClick={handleClick} />, { attachTo: document.body });
+    wrapper.find("img").first().simulate("click");
     expect(handleClick).toHaveBeenCalled();
   });
 
-  it('renders correctly with direction set to column', () => {
-    wrapper = mount(<Gallery photos={photos} direction={'column'} />);
+  it("renders correctly with direction set to column", () => {
+    wrapper = mount(<Gallery photos={photos} direction={"column"} />, { attachTo: document.body });
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('renders correctly with a column function', () => {
-    const columns = jest.fn(_ => 3);
-    wrapper = mount(<Gallery photos={photos} onClick={handleClick} columns={columns} direction="column" />);
+  it("renders correctly with a column function", () => {
+    const columns = jest.fn((_) => 3);
+    wrapper = mount(<Gallery photos={photos} onClick={handleClick} columns={columns} direction="column" />, {
+      attachTo: document.body,
+    });
     expect(columns).toBeCalledWith(1140);
   });
 });

__test__/jestsetup.js

@@ -1,4 +1,4 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure } from "enzyme";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 
-configure({ adapter: new Adapter()  });
+configure({ adapter: new Adapter() });

jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   verbose: true,
+  testEnvironment: "jsdom",
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.js'],
-  setupFiles: ['./__test__/shims.js', './__test__/jestsetup.js'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  collectCoverageFrom: ["src/**/*.js"],
+  setupFiles: ["./__test__/shims.js", "./__test__/jestsetup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
 };