Bump dev dependencies including jest & lint config (#302)

.eslintrc

@@ -17,12 +17,16 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/prop-types": [0],
     "react/destructuring-assignment": [0],
+    "react/jsx-fragments": [0],
     "import/extensions": [2, { "js": "never", "json": "always" }],
     "import/no-extraneous-dependencies": [0],
     "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
     "no-plusplus": [0],
     "no-await-in-loop": [0],
     "func-names": [0],
+    "prefer-object-spread": [0],
+    "max-classes-per-file": [0],
+    "no-async-promise-executor": [0],
     "prettier/prettier": "error"
   }
 }

examples/react-native/storybook/stories/Welcome/index.js

@@ -20,7 +20,7 @@ export default class Welcome extends React.Component {
     },
   };
 
-  showApp = event => {
+  showApp = (event) => {
     const { showApp } = this.props;
     event.preventDefault();
 

examples/react-native/storybook/stories/index.js

@@ -21,7 +21,7 @@ storiesOf('Welcome', module).add('to Storybook', () => (
 ));
 
 storiesOf('Button', module)
-  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
+  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
   .add('with text', () => (
     <Button onPress={action('clicked-text')}>
       <Text>{text('Button text', 'Hello Button')}</Text>

examples/react/src/AnimatedComponent.js

@@ -11,7 +11,7 @@ const withAlternatingState = (WrappedComponent, interval = 1000) =>
 
     componentDidMount() {
       const toggle = () =>
-        this.setState(state => ({
+        this.setState((state) => ({
           on: !state.on,
         }));
       setTimeout(toggle, 1);
@@ -51,7 +51,7 @@ export const CSSAnimation = () => (
 
 export const ReactMotion = withAlternatingState(({ on }) => (
   <Motion defaultStyle={{ rotate: 45 }} style={{ rotate: spring(on ? 0 : 45) }}>
-    {value => (
+    {(value) => (
       <div
         className="AnimatedComponent"
         style={{ transform: `rotate(${value.rotate}deg)` }}

examples/react/src/DelayedComponent.js

@@ -4,17 +4,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export default class DelayedComponent extends Component {
-  static propTypes = {
-    delay: PropTypes.number,
-    onDone: PropTypes.func,
-  };
-
-  static defaultProps = {
-    delay: 1000,
-    onDone: null,
-  };
-
-  state = { done: false };
+  constructor(props, context) {
+    super(props, context);
+    this.state = { done: false };
+  }
 
   componentDidMount() {
     this.timer = setTimeout(() => {
@@ -33,3 +26,13 @@ export default class DelayedComponent extends Component {
     return <div>{this.state.done ? 'Done!' : 'Loading…'}</div>;
   }
 }
+
+DelayedComponent.propTypes = {
+  delay: PropTypes.number,
+  onDone: PropTypes.func,
+};
+
+DelayedComponent.defaultProps = {
+  delay: 1000,
+  onDone: null,
+};

examples/react/src/FetchComponent.js

@@ -5,7 +5,7 @@ export const FetchFail = () => {
   useEffect(() => {
     setFetchState('LOADING');
     fetch('http://localhost:1234/get')
-      .then(res => {
+      .then((res) => {
         if (res.ok) {
           setFetchState('COMPLETED');
         } else {

examples/react/src/IsLokiRunning.js

@@ -4,7 +4,7 @@ import './isLokiRunning.css';
 
 const DisableAnimationsContext = React.createContext(false);
 
-export const withDisabledAnimations = getStory => (
+export const withDisabledAnimations = (getStory) => (
   <DisableAnimationsContext.Provider value={isLokiRunning()}>
     {getStory()}
   </DisableAnimationsContext.Provider>

examples/react/src/StackedElements.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const StackedElements = props => [
+const StackedElements = (props) => [
   <div>There should be another element below</div>,
   <div>Hi, I&apos;m the other element</div>,
   <div>{props.footer}</div>,

examples/react/src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

package.json

@@ -40,20 +40,20 @@
     ]
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "eslint": "6.1.0",
-    "eslint-config-airbnb": "17.1.1",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.14.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^24.9.0",
-    "lerna": "^3.19.0",
-    "prettier": "^1.18.2"
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^26.6.3",
+    "lerna": "^3.22.1",
+    "prettier": "^2.2.1"
   },
   "jest": {
     "testEnvironment": "node",

packages/browser/src/await-loki-ready.js

@@ -1,4 +1,4 @@
-const awaitLokiReady = window =>
+const awaitLokiReady = (window) =>
   window.loki && window.loki.awaitReady && window.loki.awaitReady();
 
 module.exports = awaitLokiReady;

packages/browser/src/disable-animations.js

@@ -1,6 +1,6 @@
 /* eslint no-param-reassign: ["error", { "props": false }] */
 
-const disableAnimations = window => {
+const disableAnimations = (window) => {
   const DISABLE_CSS_ANIMATIONS_STYLE = `
   *, :before, :after {
     -webkit-transition: none !important;
@@ -27,7 +27,7 @@ const disableAnimations = window => {
   const scheduleFrame = () => {
     setTimeout(() => {
       currentFrame++;
-      callbacks.splice(0).forEach(c => c(now()));
+      callbacks.splice(0).forEach((c) => c(now()));
 
       // Assume no new invocations for 50ms means we've ended
       resolveRAFTimer = setTimeout(() => {
@@ -40,7 +40,7 @@ const disableAnimations = window => {
     // Defer screenshotting until animations has ended/stabilized
     if (!resolveRAF) {
       window.loki.registerPendingPromise(
-        new Promise(resolve => {
+        new Promise((resolve) => {
           resolveRAF = resolve;
         })
       );
@@ -56,7 +56,7 @@ const disableAnimations = window => {
   // based animations run until the end within a few milliseconds.
   // In case they run infinitely or more than 1000 frames/16 "seconds",
   // we just force them to a pause.
-  window.requestAnimationFrame = callback => {
+  window.requestAnimationFrame = (callback) => {
     // Avoid infinite loop by only allowing 1000 frames
     if (currentFrame < maxFrames) {
       callbacks.push(callback);

packages/browser/src/disable-input-caret.js

@@ -1,4 +1,4 @@
-const disableInputCaret = window => {
+const disableInputCaret = (window) => {
   const DISABLE_INPUT_CARET_STYLE = `
   * {
     caret-color: transparent !important;

packages/browser/src/disable-pointer-events.js

@@ -1,4 +1,4 @@
-const disablePointerEvents = window => {
+const disablePointerEvents = (window) => {
   const DISABLE_POINTER_EVENTS_STYLE = `
   * {
     pointer-events: none !important;

packages/browser/src/get-selector-box-size.js

@@ -140,7 +140,7 @@ const getSelectorBoxSize = (window, selector) => {
   function getRootElement(rootSelector) {
     const roots = Array.from(
       Array.from(window.document.querySelectorAll(rootSelector)).map(
-        element => element.parentElement
+        (element) => element.parentElement
       )
     );
 
@@ -174,7 +174,7 @@ const getSelectorBoxSize = (window, selector) => {
     throw new Error('No visible elements found');
   }
 
-  const getBoundingClientRect = element => element.getBoundingClientRect();
+  const getBoundingClientRect = (element) => element.getBoundingClientRect();
 
   const boxSizeUnion = (domRect, { x, y, width, height }) => {
     if (!domRect) {

packages/browser/src/get-selector-box-size.spec.js

@@ -6,7 +6,7 @@
 
 const getSelectorBoxSize = require('./get-selector-box-size');
 
-const addElementsToWrapper = (rects, customMarkup = w => w) => {
+const addElementsToWrapper = (rects, customMarkup = (w) => w) => {
   let wrapper = document.querySelector('#root');
 
   if (!wrapper) {
@@ -149,7 +149,7 @@ describe('getSelectorBoxSize', () => {
       { x: 40, y: 40, width: 60, height: 60 },
       { x: 30, y: 120, width: 20, height: 20 },
     ];
-    addElementsToWrapper(mockElementRects, root => {
+    addElementsToWrapper(mockElementRects, (root) => {
       const wrapper = document.createElement('div');
       wrapper.setAttribute('class', 'wrapper');
       wrapper.getBoundingClientRect = jest.fn(() => ({

packages/browser/src/get-stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 
-const getStories = window => {
+const getStories = (window) => {
   const getStorybook =
     (window.__STORYBOOK_CLIENT_API__ && window.__STORYBOOK_CLIENT_API__.raw) ||
     (window.loki && window.loki.getStorybook);
@@ -10,7 +10,7 @@ const getStories = window => {
     );
   }
   return getStorybook()
-    .map(component => ({
+    .map((component) => ({
       id: component.id,
       kind: component.kind,
       story: component.story,

packages/browser/src/get-storybook-error.js

@@ -1,4 +1,4 @@
-const getStorybookError = window => {
+const getStorybookError = (window) => {
   const errorElement = window.document.querySelector(
     '.sb-show-errordisplay #error-message'
   );

packages/browser/src/set-loki-is-running.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-const setLokiIsRunning = window => {
+const setLokiIsRunning = (window) => {
   if (!window.loki) {
     window.loki = {};
   }

packages/browser/src/set-loki-test-attribute.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-const setLokiTestAttribute = window => {
+const setLokiTestAttribute = (window) => {
   window.document.querySelector(':root').setAttribute('loki-test', true);
 };
 

packages/core/src/errors.js

@@ -79,7 +79,7 @@ class ChromeError extends LokiError {
   }
 }
 
-const serializeError = error =>
+const serializeError = (error) =>
   JSON.stringify({
     isSerializedError: true,
     type: error instanceof LokiError ? error.name : 'Error',
@@ -96,7 +96,7 @@ const errorTypes = {
   ChromeError,
 };
 
-const parseError = jsonString => {
+const parseError = (jsonString) => {
   if (typeof jsonString !== 'string') {
     return jsonString;
   }

packages/core/src/failure-handling.js

@@ -1,7 +1,7 @@
 const { TimeoutError } = require('./errors');
 
-const withTimeout = (timeout, operationName) => fnOrPromise => {
-  const awaitPromise = promise =>
+const withTimeout = (timeout, operationName) => (fnOrPromise) => {
+  const awaitPromise = (promise) =>
     new Promise(async (resolve, reject) => {
       let cancelled = false;
       const timer = setTimeout(() => {
@@ -28,9 +28,12 @@ const withTimeout = (timeout, operationName) => fnOrPromise => {
   return awaitPromise(fnOrPromise);
 };
 
-const sleep = duration => new Promise(resolve => setTimeout(resolve, duration));
+const sleep = (duration) =>
+  new Promise((resolve) => setTimeout(resolve, duration));
 
-const withRetries = (maxRetries = 3, backoff = 0) => fn => async (...args) => {
+const withRetries = (maxRetries = 3, backoff = 0) => (fn) => async (
+  ...args
+) => {
   let tries = 0;
   let lastError;
   while (tries <= maxRetries) {

packages/core/src/failure-handling.spec.js

@@ -37,7 +37,7 @@ describe('withRetries', () => {
     for (let i = 0; i < retries; i++) {
       expect(callback).toHaveBeenCalledTimes(0);
       jest.runAllTimers();
-      await new Promise(resolve => setImmediate(resolve));
+      await new Promise((resolve) => setImmediate(resolve));
     }
     await expect(output).rejects.toThrow('Failed with "output"');
     expect(mockFn).toHaveBeenCalledTimes(4);

packages/core/src/get-absolute-url.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-const getAbsoluteURL = url => {
+const getAbsoluteURL = (url) => {
   if (url && url.indexOf('file:') === 0) {
     return `file:${path.resolve(url.substr('file:'.length))}`;
   }

packages/create-async-callback/src/index.native.js

@@ -5,7 +5,7 @@ const {
 module.exports = function createAsyncCallback() {
   let resolveAsyncStory;
   registerPendingPromise(
-    new Promise(function(resolve) {
+    new Promise((resolve) => {
       resolveAsyncStory = resolve;
     })
   );

packages/create-async-callback/src/index.web.js

@@ -5,11 +5,12 @@ module.exports = function createAsyncCallback(win = window) {
   let resolveAsyncStory;
   if (registerPendingPromise) {
     registerPendingPromise(
-      new Promise(function(resolve) {
+      new Promise((resolve) => {
         resolveAsyncStory = resolve;
       })
     );
   }
+
   return () => {
     if (resolveAsyncStory) {
       resolveAsyncStory();

packages/diff-graphics-magick/src/create-graphics-magick-differ.js

@@ -1,7 +1,7 @@
 const fs = require('fs-extra');
 const gm = require('gm');
 
-const getSize = filePath =>
+const getSize = (filePath) =>
   new Promise((resolve, reject) => {
     gm(filePath).size((err, value) => {
       if (err) {

packages/diff-graphics-magick/src/create-graphics-magick-differ.spec.js

@@ -1,4 +1,4 @@
-const mockSize = jest.fn(callback => callback(null, { with: 1, height: 1 }));
+const mockSize = jest.fn((callback) => callback(null, { with: 1, height: 1 }));
 
 const gm = require('gm');
 const createGraphicsMagickDiffer = require('./create-graphics-magick-differ');
@@ -21,10 +21,10 @@ describe('createGraphicsMagickDiffer', () => {
   const tolerance = 1;
 
   it('should return false for unequal sizes', async () => {
-    mockSize.mockImplementationOnce(callback =>
+    mockSize.mockImplementationOnce((callback) =>
       callback(null, { with: 100, height: 100 })
     );
-    mockSize.mockImplementationOnce(callback =>
+    mockSize.mockImplementationOnce((callback) =>
       callback(null, { with: 100, height: 200 })
     );
     const config = { asdf: '1234' };