효소 설정 파일은 어디에 작성해야 합니까?

효소 설정 파일은 어디에 작성해야 합니까?

어제 리액트 프로젝트를 v16.0으로 업그레이드했는데, 효소에 문제가 있는 것을 발견했습니다.

    Error: 
      Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
      configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:
      import Adapter from 'enzyme-adapter-react-15';
      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

    at validateAdapter (spec/components/page_components/SongListItem/index.spec.js:9:1141986)
    at getAdapter (spec/components/page_components/SongListItem/index.spec.js:9:323041)
    at new ReactWrapper (spec/components/page_components/SongListItem/index.spec.js:9:622193)
    at mount (spec/components/page_components/SongListItem/index.spec.js:9:2025476)
    at UserContext.<anonymous> (spec/components/page_components/SongListItem/index.spec.js:9:1235741)

그리고 공식 웹사이트에서 해결책을 찾았다.

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

하지만 문제가 있습니다.효소 설정 파일은 어디에 작성해야 합니까?각 테스트 파일 앞에?

테스트 파일 중 하나에 위의 코드를 추가하려고 했지만 여전히 문제가 있습니다.

 Internal error: attempt to prepend statements in disallowed (non-array) context at C:/Users/killer/workspace/react/NetEase-Cloud-Music-Web/spec/components/page_components/SongListItem/index.spec.js

이것은 제 프로젝트의 주소입니다.

나도 비슷한 문제가 있었다.

""를 생성할 수 .test-setup.js파일화하여 효소 문서의 일부를 추가합니다.

// test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

나서 a를 .setupTestFrameworkScriptFile키를 누르고 해당 파일을 가리킵니다.를 들어이 " "에 있는 Configuration"을 농담합니다.package.json:

// package.json
{
    ...,
    "jest": {
        "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
    }
}

joke docs https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string 에서 참조해 주세요.

각 테스트 전에 테스트 프레임워크를 설정 또는 설정하기 위해 몇 가지 코드를 실행하는 모듈의 경로입니다.환경에 테스트 프레임워크가 설치되기 전에 setupFiles가 실행되므로 이 스크립트파일은 환경에 테스트 프레임워크가 설치된 직후에 몇 가지 코드를 실행할 수 있는 기회를 제공합니다.

이것은 농담 환경이 초기화된 후 효소 테스트가 실행되기 전에 실행됩니다.

create-react-appcreate-react-app을 사용하는
★★★★★★★★★★★★★★★★를 실행할 필요가 있습니다.yarn eject ★★★★★★★★★★★★★★★★★」npm run eject '재밌다', '재밌다'에 농담 package.json.
외에 '있다'도 있어요.setupTestFrameworkScriptFile는 현재 .setupFilesAfterEnv.

create-react-app을 사용하는 사용자에게 셋업 파일의 예상 경로는 다음과 같습니다.src/setupTests.jsGitHub의 문서(README)를 참조해 주세요.

테스트 환경 초기화 중

주의: 이 기능은 react-scripts@0.4.0 이후에 사용할 수 있습니다.테스트에서 시뮬레이션해야 하는 브라우저 API를 사용하는 경우 또는 테스트를 실행하기 전에 글로벌 설정만 필요한 경우 프로젝트에 src/setupTests.js를 추가합니다.테스트를 실행하기 전에 자동으로 실행됩니다.

(create-react-app)은.setupTestFrameworkScriptFilepackage.json).

2019년 6월 업데이트

CRA(create-react-app)를 사용하는 사용자src/setupTests.js□□□□□□□□□□□□□□□□□□□□□□jest.config.js.

module.exports = {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(scss|sass|css)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

ModuleNameMapper는 정적 파일 Import 문(옵션)을 회피합니다.

부터setupTestFrameworkScriptFile더 이상 사용되지 않기 때문에setupFilesAfterEnv속성 값을 배열로 지정합니다.

다음 사항을 확인합니다.setupTests.js프로젝트 src 폴더에 있는 파일 또는 설정을 지정합니다.프로젝트의 Tests.js 파일 위치를 지정합니다.

상세 정보

setupTests.js파일의 내용은 다음과 같습니다.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

이 설정은 리액트 16에서 동작합니다.

리액트 v16에서 효소 내부 오류가 발생한 경우에도 비슷한 문제가 있었습니다.다음 코드를 src/setupTests.js에 입력해야 합니다.

import Enzyme from "enzyme";
import EnzymeAdapter from "enzyme-adapter-react-16";

Enzyme.configure({
  adapter: new EnzymeAdapter(),
});

패키지에 jast를 설정합니다.json 파일.다음 행을 추가합니다.

  "jest": {
    ...
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    ...
  },

package.json에 구성을 추가할 필요가 없습니다."src" 폴더에 "setupTests.js" 파일을 추가하고 행을 추가합니다.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

설정을 추가하려고 하면 다음과 같은 오류가 발생합니다.

package.json에서 setupFilesAfterEnv가 검출되었습니다.

Jest 설정에서 삭제하고 초기화 코드를 src/setupTests.js에 넣습니다.이 파일은 자동으로 로드됩니다.

React 16(기능)과 관련된 문제를 반복적으로 겪고 있는 고객용Jest와 함께Enzyme라이브러리로 이동합니다.

그렇게,package.json을 위한react-scripts test다음과 같습니다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/user-event": "^14.2.0",
    "axios": "^0.19.0",
    "bootstrap": "^4.6.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --setupFilesAfterEnv='<rootDir>/setupTests.js'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "jest": "^24.7.1"
  }
}

src/setupTests.js언급은 다음과 같습니다.

import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
configure({ adapter: new Adapter() })

그래도Home/index.jsx컴포넌트와Home/index.test.js는 같은 디렉토리에서 사용할 수 있습니다.따라서 다음과 같습니다.

import React from "react"
import Home from "./index"
import { shallow } from "enzyme"

describe("Shallow Home Page", () => {
  it("Home Component Check", () => {
    let home_wrapper = shallow(<Home />)
    console.log("home_wrapper is", home_wrapper.debug())
    expect(home_wrapper.exists(".text-center")).toEqual(true)
  })
})

그럼, 뭘 기다리고 있는 거야? 어서...

npm run test

이것이 많은 사람들에게 도움이 되기를 바란다.

언급URL : https://stackoverflow.com/questions/46627353/where-should-the-enzyme-setup-file-be-written