I am working through Kent C. Dodds' new javascript testing course. Below is a minorly reconfigured version of what he has by Section 4, part 11 (his code is here).
What behavior were you expecting?
The configured ESLint to properly allow 'global' imports as defined in my jest.config file.
What actually happened?
The override definition in my .eslintrc.js breaks ESLints ability to recognize any imports correctly in the targeted directories.
How can I reproduce it?
I clone Kent Dodds branch given above and open it in VSCode. ESLint throws errors.
What was your environment like?
Windows 10 Home
VSCode 1.28.2
npm: '6.4.1',
node: v8.12.0,
package.json:
{
"name": "calculator",
"version": "1.0.0",
"description": "See how to configure Jest and Cypress with React, Babel, and Webpack",
"main": "index.js",
"scripts": {
"test": "jest",
"dev": "webpack-serve",
"build": "webpack --mode=production",
"postbuild": "cp ./public/index.html ./dist/index.html",
"start": "serve --no-clipboard --listen 8080 dist",
"lint": "eslint .",
"format": "prettier \"**/*.js\" --write",
"validate": "npm run lint && npm run test && npm run build",
"setup": "npm run setup && npm run validate"
},
"keywords": [],
"author": "Kent C. Dodds <[email protected]> (http://kentcdodds.com/)",
"license": "GPL-3.0",
"devDependencies": {
"@babel/core": "^7.0.0-beta.51",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.51",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.51",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"@babel/preset-react": "^7.0.0-beta.51",
"babel-core": "7.0.0-bridge.0",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-emotion": "^9.2.4",
"css-loader": "^0.28.11",
"eslint": "^5.0.1",
"eslint-config-kentcdodds": "^14.0.0",
"eslint-import-resolver-jest": "^2.1.1",
"file-loader": "^1.1.11",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.6.0",
"jest-emotion": "^9.2.11",
"prettier": "^1.13.7",
"prop-types": "^15.6.2",
"react-testing-library": "^5.2.3",
"serve": "^9.1.0",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-serve": "^1.0.4"
},
"dependencies": {
"emotion": "^9.2.4",
"emotion-theming": "^9.2.9",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-emotion": "^9.2.4",
"react-loadable": "^5.4.0",
"react-point": "^3.0.1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kentcdodds/jest-cypress-react-babel-webpack.git"
},
"bugs": {
"url": "https://github.com/kentcdodds/jest-cypress-react-babel-webpack/issues"
},
"homepage": "https://github.com/kentcdodds/jest-cypress-react-babel-webpack#readme"
}
My jest.config.js file in the project root:
const path = require('path');
module.exports = {
testEnvironment: 'jest-environment-jsdom',
moduleDirectories: [
'node_modules',
path.join(__dirname, 'src'),
'shared',
path.join(__dirname, 'test'),
],
moduleNameMapper: {
'\\.module\\.css$': 'identity-obj-proxy',
'\\.css$': require.resolve('./test/style-mock.js'),
},
setupTestFrameworkScriptFile: require.resolve('./test/setup-tests.js'),
};
My eslintrc, also in the project root:
const path = require('path');
module.exports = {
extends: [
'kentcdodds',
'kentcdodds/import',
'kentcdodds/webpack',
'kentcdodds/jest',
'kentcdodds/react',
],
rules: {
'linebreak-style': 0,
'global-require': 0,
'eslint linebreak-style': [0, 'error', 'windows'],
},
overrides: [
{
files: ['**/__tests__/**'],
settings: {
'import/resolver': {
jest: {
jestConfigFile: path.join(__dirname, './jest.config.js'),
},
},
},
},
],
};
Eslint-import-resolver-jest does not seem to gather the module directories correctly from the targeted jest config file. However, the override is apparently being applied, as ESLint throws an error for all imports, including for installed node modules (when the override is removed, the required node modules don't throw any linting errors, as expected).
import React from 'react'; // ESLint throws "unable to resolve path to module" for all three of these imports
import { render } from 'calculator-test-utils';
import CalculatorDisplay from '../calculator-display';
I cloned Dodds branch and experienced precisely the same issue, so I don't think I have made some minor mistake somewhere. Any idea what's going on here? Thanks all very much in advance for your help!