Solving linter error- 'shallow' is not defined no-undef

Question

I am using JEST and Enzyme. In my eslint file I have added jest as true under env. But I get a lint error for shallow as I have included it globally. Error is- error 'shallow' is not defined no-undef

setupTests.js

//as we are accessing our application with a http://localhost prefix, we need to update our jest configuration

import { shallow, render, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;

.eslintrc

{
  parser: "babel-eslint",
  "extends": ["airbnb"],
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "max-len": [1, 200, 2, {ignoreComments: true}],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-underscore-dangle": [0, { "allow": [] }],
    "jsx-a11y/label-has-associated-control": [
      "error", {
        "required": {
          "every": [ "id" ]
        }
      }
    ],
    "jsx-a11y/label-has-for": [
      "error", {
        "required": {
          "every": [ "id" ]
        }
      }
    ]
  }
}

app.test.js

import React from 'react';

import { LoginFormComponent } from '../../components';

describe('LoginForm', () => {
  const loginform = shallow(<LoginFormComponent />);

  it('renders correctly', () => {
    expect(loginform).toMatchSnapshot();
  });
});

package.json

 "scripts": {
    "dev": "webpack-dev-server --historyApiFallback true --port 8888 --content-base build/",
    "test": "jest",
    "lint": "eslint ./src",
    "lintfix": "eslint ./src --fix"
  },
  "jest": {
    "verbose": true,
    "testURL": "http://localhost/",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "setupFiles": [
      "./setupTests.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },

The error comes in my app.test.js where I am trying to use shallow. Do I have to add something in my eslint config for enzyme the way I have made jest as true?

Answer 1

How about add global statement? eslint no-undef docs

/*global someFunction b:true*/
/*eslint no-undef: "error"*/

var a = someFunction();
b = 10;

or set global on .eslintrc (eslint global)

{
    "globals": {
        "shallow": true,
        "render": true,
        "mount": true
    }
}

Answer 2

Updated .eslintrc

{
  parser: "babel-eslint",
  "extends": ["airbnb"],
  "env": {
    "browser": true,
    "jest": true
  },
  "globals": {
    "shallow": true
  },
  "rules": {
    "max-len": [1, 200, 2, {ignoreComments: true}],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-underscore-dangle": [0, { "allow": [] }],
    "jsx-a11y/label-has-associated-control": [
      "error", {
        "required": {
          "every": [ "id" ]
        }
      }
    ],
    "jsx-a11y/label-has-for": [
      "error", {
        "required": {
          "every": [ "id" ]
        }
      }
    ]
  }
}