mercredi 29 avril 2020

React tests are not working after building it by Webpack

I have an issue that I'm spending a lot of time to seek a solution. Previously my project was build by CRA and used react-scripts. Test script was working. For test I used react-testing-library (now implemented to react by default). Actually it has changed and now app is built by webpack. I tried to implement jest and test, but I cannot configure it in proper way.

I tried:

  • install jest and babel-jest
  • add jest.config.js / jest.config.json

But still jest is sending me this information:


    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.     

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

Error shows whenever it meets React syntax

it("renders without crashing", () => {
       6 |   const div = document.createElement("div")
    >  7 |   ReactDOM.render(<App/>, div)
         |                   ^
       8 | })

My webpack config:

let path = require("path")

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(process.cwd(), "name/static/js"),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

package.json

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "formik": "^2.1.4",
    "json-server": "^0.16.1",
    "lodash": "^4.17.15",
    "react": "^16.13.0",
    "react-input-mask": "^2.0.4",
    "react-simple-timefield": "^3.0.0",
    "reactstrap": "^8.4.1",
    "yup": "^0.28.3"
  },
  "scripts": {
    "test": "jest",
    "start-dev": "webpack --progress --colors --watch --config webpack.dev.js",
    "build": "webpack --progress --colors --config webpack.prod.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 edge version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@testing-library/dom": "^7.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "babel-jest": "^25.5.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "jest": "^25.5.0",
    "react-dom": "^16.13.1",
    "react-snapshot": "^1.3.0",
    "react-test-renderer": "^16.13.1",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-merge": "^4.2.2"
  }
}

},

My purpose is to be available to run tests with this configuration.

Aucun commentaire:

Enregistrer un commentaire