Реактивные тесты не работают после сборки его через Webpack

Question

У меня есть проблема, которую я трачу много времени на поиск решения. Ранее мой проект был построен CRA и использовал реагирующие скрипты. Тестовый скрипт работал. Для тестирования я использовал реагирующую библиотеку (теперь она реализована так, чтобы реагировать по умолчанию). На самом деле это изменилось, и теперь приложение создается через веб-пакет. Я пытался реализовать Jest и Test, но я не могу настроить его должным образом.

Я пытался:

• установить jest и babel-jest
• добавить jest.config. js / jest.config. json

Но все же шутка посылает мне эту информацию:

    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

Ошибка отображается, когда она соответствует Синтаксис React

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

Мой конфиг веб-пакета:

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"],
      },
    ],
  },
}

пакет. 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"
  }
}

},

Моя цель - быть доступным для запуска тестов с этой конфигурацией.

Answer 1

Я нашел решение здесь: https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples

, когда я пишу скрипт в пакете. json это должно быть просто "test": "jest" и добавление в пакет. json

  "babel": {
    "presets": [
      "react-app"
    ]
  },

Необходимо создать новый файл jest.config. js с кодом:

const path = require('path')

module.exports = {
  roots: [path.resolve(__dirname, './src')],
  testEnvironment: 'jest-environment-jsdom-sixteen',
  displayName: 'tests',
  testMatch: ['**//__tests__/**/*.js', '**/?(*.)+(spec|test).[jt]s?(x)'],
  testURL: 'http://localhost',
  setupFilesAfterEnv: [path.resolve(__dirname, './src/setupTests.js')],
}

Мои тестовые файлы находятся в папке src / __ tests __ / и имеют расширение. test. js (i.e. app.test.js) Добавить файл setupTests. js, который содержит:

import '@testing-library/jest-dom/extend-expect'

После этого установите jest-environment-jsdom-sixteen и babel-preset-react-app. Наконец npm test должен работать и запустить все тесты, содержащиеся в папке __test__.