JEST 和 ES6 导入 - 基于根文件夹的导入不起作用

Question

I have a React project based on React Redux Starter Kit .

In Jest tests: when I trying to import something with root-based path like "components/Link" - it does not work. Only relative paths are working.

Putting

{ "jest": { "rootDir": "<rootDir>/src" } }

in file package.json does not work.

Is there another way?

File package.json :

{
  "name": "react-redux-starter-kit",
  "version": "3.0.0-alpha.2",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": ">=4.5.0",
    "npm": "^3.0.0"
  },
  "scripts": {
    "clean": "rimraf dist",
    "compile": "better-npm-run compile",
    "lint": "eslint bin build config server src tests",
    "lint:fix": "npm run lint -- --fix",
    "start": "better-npm-run start",
    "dev": "better-npm-run dev",
    "test": "jest",
    "test:dev": "npm run test -- --watch",
    "deploy": "better-npm-run deploy",
    "deploy:dev": "better-npm-run deploy:dev",
    "deploy:prod": "better-npm-run deploy:prod",
    "codecov": "cat coverage/*/lcov.info | codecov"
  },
  "betterScripts": {
    "compile": {
      "command": "node bin/compile",
      "env": {
        "DEBUG": "app:*"
      }
    },
    "dev": {
      "command": "nodemon bin/server --ignore dist --ignore coverage --ignore tests --ignore src",
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "app:*"
      }
    },
    "deploy": {
      "command": "npm run lint && npm run clean && npm run compile",
      "env": {
        "DEBUG": "app:*"
      }
    },
    "deploy:dev": {
      "command": "npm run deploy",
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "app:*"
      }
    },
    "deploy:prod": {
      "command": "npm run deploy",
      "env": {
        "NODE_ENV": "production",
        "DEBUG": "app:*"
      }
    },
    "start": {
      "command": "node bin/server",
      "env": {
        "DEBUG": "app:*"
      }
    },
    "test": {
      "command": "node ./node_modules/karma/bin/karma start build/karma.conf",
      "env": {
        "NODE_ENV": "test",
        "DEBUG": "app:*"
      }
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/davezuko/react-redux-starter-kit.git"
  },
  "author": "MyCityOnline",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.3.13",
    "babel-runtime": "^6.11.6",
    "better-npm-run": "0.0.11",
    "cropperjs": "^1.0.0-beta.2",
    "css-loader": "^0.25.0",
    "cssnano": "^3.7.4",
    "debug": "^2.2.0",
    "dotenv": "^2.0.0",
    "es6-promise": "^4.1.0",
    "essence-core": "^1.0.20",
    "essence-switch": "^1.0.10",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "fs-extra": "^0.30.0",
    "html-webpack-plugin": "^2.22.0",
    "imports-loader": "^0.6.5",
    "ip": "^1.1.2",
    "isomorphic-fetch": "^2.2.1",
    "json-loader": "^0.5.4",
    "jwt-decode": "^2.1.0",
    "lodash": "^4.16.3",
    "moment": "^2.17.1",
    "node-sass": "^3.7.0",
    "normalize.css": "^4.1.1",
    "pikaday": "^1.5.1",
    "postcss-loader": "^0.13.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.0",
    "redux": "^3.6.0",
    "redux-api-middleware": "^1.0.2",
    "redux-thunk": "^2.0.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.14",
    "whatwg-fetch": "^2.0.1",
    "yargs": "^5.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^6.0.0-beta.6",
    "babel-jest": "^19.0.0",
    "babel-plugin-istanbul": "^2.0.1",
    "breakpoint-sass": "^2.7.0",
    "chai": "^3.4.1",
    "chai-as-promised": "^5.3.0",
    "chai-enzyme": "^0.5.0",
    "cheerio": "^0.20.0",
    "codecov": "^1.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "enzyme": "^2.0.0",
    "eslint": "^3.0.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-config-standard-react": "^4.0.0",
    "eslint-plugin-babel": "^3.2.0",
    "eslint-plugin-promise": "^3.3.0",
    "eslint-plugin-react": "^6.0.0",
    "eslint-plugin-standard": "^2.0.0",
    "express": "^4.14.0",
    "http-proxy-middleware": "^0.17.2",
    "jest": "^19.0.2",
    "karma": "^1.0.0",
    "karma-coverage": "^1.0.0",
    "karma-mocha": "^1.0.1",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-webpack-with-fast-source-maps": "^1.9.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "mocha": "^3.0.1",
    "nodemon": "^1.10.2",
    "phantomjs-prebuilt": "^2.1.12",
    "react-addons-test-utils": "^15.0.0",
    "redbox-react": "^1.2.10",
    "redux-logger": "^2.6.1",
    "regenerator-runtime": "^0.10.3",
    "sinon": "^1.17.5",
    "sinon-chai": "^2.8.0",
    "susy": "^2.2.12",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.12.2"
  },
    "jest": {
        "rootDir": "<rootDir>/src"
  }
}

Final working Jest part of file package.json :

"jest": {
    "rootDir": "./src/",
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "src"],
    "verbose": true
}

Answer 1

I think that if you don't want to use relative paths, you have to define additional moduleDirectories , like

// package.json
{
  "jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "src"],
  }
} 

More about moduleDirectories in jest docs and configuring jest to find files .

Answer 2

Modifying moduleFileExtensions and moduleDirectories did not work for me. This did in jest.config.js:

moduleNameMapper: {
  "src/(.*)": "<rootDir>/src/$1",
},

I found the solution here and found I ony needed to change moduleNameMapper.

https://til.hashrocket.com/posts/lmnsdtce3y-import-absolute-paths-in-typescript-jest-tests

Answer 3

This jest config can help:

"jest": {
  "rootDir": ".",
  "roots": ["<rootDir>"],
  "modulePaths": ["<rootDir>"],
}

Answer 4

If you are using 'create-react-app' then install these development dependencies:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

And also update the file .babelrc (create this file if it doesn't exist):

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

And now both Jest and npm test both work as they should.