Updating InstallPrompt to use react-testing-library

src/components/InstallPrompt/__snapshots__/test.js.snap

@@ -1,16 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InstallPrompt rendering 1`] = `""`;
+exports[`InstallPrompt accepting install prompt 1`] = `
+<DocumentFragment>
+  <a
+    data-testid="install"
+    href="#install"
+  >
+    <span
+      data-component="Trans"
+      data-props="{}"
+    >
+      Add to Home Screen
+    </span>
+  </a>
+</DocumentFragment>
+`;
 
-exports[`InstallPrompt rendering after an install prompt has been requested 1`] = `""`;
+exports[`InstallPrompt accepting install prompt 2`] = `<DocumentFragment />`;
+
+exports[`InstallPrompt rejecting install prompt 1`] = `
+<DocumentFragment>
+  <a
+    data-testid="install"
+    href="#install"
+  >
+    <span
+      data-component="Trans"
+      data-props="{}"
+    >
+      Add to Home Screen
+    </span>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`InstallPrompt rejecting install prompt 2`] = `<DocumentFragment />`;
+
+exports[`InstallPrompt rendering 1`] = `<DocumentFragment />`;
+
+exports[`InstallPrompt rendering after an install prompt has been requested 1`] = `<DocumentFragment />`;
 
 exports[`InstallPrompt rendering after an install prompt has been requested 2`] = `
+<DocumentFragment>
   <a
+    data-testid="install"
     href="#install"
-  onClick={[Function]}
   >
-  <Trans>
+    <span
+      data-component="Trans"
+      data-props="{}"
+    >
       Add to Home Screen
-  </Trans>
+    </span>
   </a>
+</DocumentFragment>
 `;

src/components/InstallPrompt/index.js

@@ -43,7 +43,10 @@ class InstallPrompt extends React.PureComponent {
       return null;
     }
 
-    return <a href="#install" onClick={ this.handleInstall }>
+    return <a href="#install"
+      data-testid="install"
+      onClick={ this.handleInstall }
+    >
       <Trans>Add to Home Screen</Trans>
     </a>;
   }

src/components/InstallPrompt/test.js

@@ -1,88 +1,86 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, fireEvent } from 'react-testing-library';
 
 import { InstallPrompt } from 'components/InstallPrompt';
 
 describe('InstallPrompt', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <InstallPrompt />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering after an install prompt has been requested', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <InstallPrompt />
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
-    component.instance().handleInstallPrompt({
+    const event = new Event('beforeinstallprompt', {
       prompt: jest.fn()
     });
+    fireEvent(window, event);
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
-  test('adding and removing event listener', () => {
+  test('removing event listener', () => {
     jest.spyOn(window, 'addEventListener');
     jest.spyOn(window, 'removeEventListener');
 
-    const component = shallow(
+    const { unmount } = render(
       <InstallPrompt />
     );
-    const handleInstallPrompt = component.instance().handleInstallPrompt;
 
-    expect(window.addEventListener).toHaveBeenCalledWith(
+    unmount();
-      'beforeinstallprompt',
-      handleInstallPrompt);
-
-    component.unmount();
 
     expect(window.removeEventListener).toHaveBeenCalledWith(
       'beforeinstallprompt',
-      handleInstallPrompt);
+      expect.any(Function));
   });
 
   test('accepting install prompt', async () => {
-    const component = shallow(
+    const { asFragment, getByTestId } = render(
       <InstallPrompt />
     );
-    const promptObj = {
+    const promptEvent = new Event('beforeinstallprompt');
-      prompt: jest.fn(),
+    promptEvent.prompt = jest.fn();
-      userChoice: Promise.resolve()
+    promptEvent.userChoice = Promise.resolve();
-    };
+    const clickEvent = new MouseEvent('click', { bubbles: true });
-    const eventObj = { preventDefault: jest.fn() };
+    jest.spyOn(clickEvent, 'preventDefault');
 
-    component.instance().handleInstallPrompt(promptObj);
+    fireEvent(window, promptEvent);
-    component.find('a').simulate('click', eventObj);
+    expect(asFragment()).toMatchSnapshot();
+    fireEvent(getByTestId('install'), clickEvent);
 
     // Allow async code to run
     await new Promise(resolve => setTimeout(resolve));
 
-    expect(eventObj.preventDefault).toHaveBeenCalled();
+    expect(clickEvent.preventDefault).toHaveBeenCalled();
-    expect(promptObj.prompt).toHaveBeenCalled();
+    expect(promptEvent.prompt).toHaveBeenCalled();
-    expect(component.state('installPrompt')).toBeNull();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rejecting install prompt', async () => {
-    const component = shallow(
+    const { asFragment, getByTestId } = render(
       <InstallPrompt />
     );
-    const promptObj = {
+    const promptEvent = new Event('beforeinstallprompt');
-      prompt: jest.fn(),
+    promptEvent.prompt = jest.fn();
-      userChoice: Promise.reject()
+    promptEvent.userChoice = Promise.reject();
-    };
+    const clickEvent = new MouseEvent('click', { bubbles: true });
-    const eventObj = { preventDefault: jest.fn() };
+    jest.spyOn(clickEvent, 'preventDefault');
 
-    component.instance().handleInstallPrompt(promptObj);
+    fireEvent(window, promptEvent);
-    component.find('a').simulate('click', eventObj);
+    expect(asFragment()).toMatchSnapshot();
+    fireEvent(getByTestId('install'), clickEvent);
 
     // Allow async code to run
     await new Promise(resolve => setTimeout(resolve));
 
-    expect(eventObj.preventDefault).toHaveBeenCalled();
+    expect(clickEvent.preventDefault).toHaveBeenCalled();
-    expect(promptObj.prompt).toHaveBeenCalled();
+    expect(promptEvent.prompt).toHaveBeenCalled();
-    expect(component.state('installPrompt')).toBeNull();
+    expect(asFragment()).toMatchSnapshot();
   });
 });