programing

jeast.config.js와 create-react-app을 사용하는 방법

muds 2023. 3. 17. 22:04
반응형

jeast.config.js와 create-react-app을 사용하는 방법

패키지에서 joke 설정을 옮기고 싶습니다.json, 여기서 제안하는 대로 --config를 사용하려고 하는데 오류가 발생합니다.argv.config.match is not a function

패키지.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --config jest.config.js",
    "eject": "react-scripts eject",
  },

클리

hutber@hutber-mac:/var/www/management/node$ npm test -u

> management-fresh@0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js

Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]


argv.config.match is not a function
npm ERR! Test failed.  See above for more details.

추가되는 나의 경우-- --config=jest.config.js일했다.

그래서 끈 전체가react-scripts test -- --config jest.config.js당신의 경우는요.

TL;DR

더하다--를 참조해 주세요.

"test": "react-scripts test -- --config=jest.config.js",

여기서의 문제는react-scripts옵션이 전달되지 않습니다.직접 실행함으로써 이를 입증할 수 있습니다.

./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function

./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.

바리에이션

스크립트에 옵션을 전달하는 방법은 사용하는npm 또는 Yarn 버전에 따라 달라집니다.완성도를 높이기 위해 다음과 같은 다양한 결과를 얻을 수 있습니다.

# This runs, but completely ignores the option.
npm test --config=jest.config.js

# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js

react 앱 생성 테스트 스크립트 설정package.json와 함께

"test": "react-scripts test",

이와 같이 추가 옵션을 설정할 수 있습니다.

"test": "react-scripts test -- --config=jest.config.js",

CLI 를 사용해 옵션을 송신하는 경우는, 와 같은 것이 기능하는 경우가 있습니다.

"test": "react-scripts test --",
yarn test --bail
# comes through as
react-scripts test -- --bail

자원.

다음은 다양한 사용법을 설명하는 몇 가지 리소스입니다.

나는 더하기jest의 핵심으로서package.json파일이 동작했습니다.에서 모든 필수 구성을 개체로 추가했습니다.jest키를 누릅니다.

"jest": {
    "collectCoverageFrom": [
      "src/**/*.js",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "text-summary",
      "lcov",
      "cobertura"
    ],
    "testMatch": [
      "**/*.test.js"
    ]
  },

하지 않다

  • npm install jest --save-dev(이것이 필요한지 아닌지는 잘 모르겠습니다.그냥 했어요).
  • 교체하다
"scripts": {
    ...
    "test": "react-scripts test",
    ...
  },

와 함께

"scripts": {
    ...
    "test": "jest --watch",
    ...
  },
  • 정상적으로 테스트를 실행하다npm test

전부다.

추가 중-- --config=jest.config.js나에게 있어서 일종의 작업: 테스트는 통과했지만 다음 오류가 발생했습니다(삭제).

Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.

이 문제는 위의 코멘트에 기재되어 있습니다.

현재 상황은 다음과 같습니다.

npm test패키지로 표시됩니다.뭐가 들어있든scripts.test그걸 실행해요.create-react-app의 경우react-scripts test이 동작은 다음 동작합니다./node_modules/react-scripts/scripts/test.js(소스) (이 디버깅을 쉽게 인쇄하여 무슨 일이 일어나고 있는지 확인할 수 있습니다.이 스크립트는 사용자 환경에 따라 농담 구성을 구축합니다.추가할 때:

"test": "react-scripts test -- --config=jest.config.js",

로.package.json이 명령어는 다음과 같은 joke 설정을 대체합니다.react-scripts test(실제!)를 작성하려고 하고 있지만, 그 논의는 무효가 됩니다."test": "react-scripts test"generates (boo!)그래서 joke는 테스트 패턴(분명히 유효한 테스트 패턴이 아님)으로 통과하려고 한다고 생각합니다.

그래서 joke CLI를 사용하여 테스트를 실행해 보기로 했습니다.적어도 나에겐, 잘 작동했고 내 모든 시험을 다 치렀어.자동으로 검색됩니다.jest.config.js그게 효과가 있고, 당신은 합격할 수 있습니다.--watch같은 행동을 하게 되다react-scripts test.

주의해 주세요react-scripts test을 겪고 것 모든 에 있습니다를 들어, 적구구구 ; seems; 。저는 아직 그 모든 것을 알아내려고 노력하지 않았습니다.YMMV가 되다이것이 제 환경에 생기는 모든 옵션 세트입니다.예예 、 를를 、 ,를 、--config구성

[
  '--watch',
  '--config',
  '{"roots":["<rootDir>/src"],
      "collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"],
      "setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
      "setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
      "testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
        "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
      "testEnvironment":"jsdom",
      "testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
      "transform":{
        "^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
        "^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
        "^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
      "transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
        "^.+\\\\.module\\\\.(css|sass|scss)$"],
      "modulePaths":[],
      "moduleNameMapper":{"^react-native$":"react-native-web",
      "^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
      "moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
      "watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
      "resetMocks":true,
      "rootDir":"<my_root_elided>"}',
  '--env',
  '<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]

이것도 맞혔어! 리액트 앱 만들기에는 이미 농담이 포함되어 있어서 조금 까다로워.제거했습니다. --config jest.config.js"test.config" "test.config" "test.config" "test."

그리고 내 효소 파일에 셋업이라는 이름을 붙여놨어Tests.js.테스트 모듈은 이 파일을 실행하기 위해 특별히 조사하기 때문에 이름을 지정해야 합니다.또한, SRC/폴더에 저장해야 했고, 그 전에는 SRC/테스트 폴더에 저장해야 했습니다.만약 위의 질문을 하신다면, 아마 이 부분은 지나갔을 것입니다만, 만약을 위해 언급하고 싶은 것이 있습니다.내 셋업Tests.js는 다음과 같습니다.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter()
})

저는 위의 답변 중 어느 것도 통하지 않았습니다.하지만 문서 작성의 도움으로 길을 알아냈어요.joke를 를 "joke"에 .your_project_root_folder/src/setupTests.jsyour_project_root_folder/src/setupTests.js 모양입니다.

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({
    adapter: new Adapter(),
})

한 더 점은 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,enzyme-adapter-react-16★★★★★★에react v16 ★★★★★★★★★★★★★★★★★」enzyme-adapter-react-15★★★★★★에react v15

'를 '보다'를 쓰세요.enzyme-to-json 다음 수 package.json

  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  }

도 한 번 요."test": "jest --no-cache -w 2"discl로 해 주세요.조나조나타 다음 " " " " 를 실행합니다.npm run test

언급URL : https://stackoverflow.com/questions/59878153/how-to-use-jest-config-js-with-create-react-app

반응형