효소에서는 어댑터가 구성되어야 합니다.

효소에서는 어댑터가 구성되어야 합니다.

create-react-app을 사용하여 새로운 React 어플리케이션을 만들었는데, 어플리케이션에서 작성한 "MessageBox"라는 컴포넌트에 유닛 테스트를 작성하려고 했습니다.이것은 제가 작성한 단위 테스트입니다.

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';

test('message box', () => {
   const app = {setState: jest.fn()};
   const wrapper = shallow(<MessageBox app={app}/>);
   wrapper.find('button').at(0).simulate('click');
   expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});

'src' 폴더 아래에 'setup'이라는 파일도 추가했습니다.Tests.js'의 내용:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

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

검색 결과:

npm 테스트

에러가 발생했습니다.

효소 내부 오류: 효소는 어댑터가 구성되어야 하지만 발견되지 않았습니다.하려면 , 「」, 「」의 URL 에 문의해 .Enzyme.configure({ > adapter: new Adapter() })

이 문제를 해결할 수 있는 게 뭔지 아세요?

테스트 케이스 파일에 추가합니다.

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

configure({adapter: new Adapter()});
test('message box', ()=> {
     ...
})

또한 설정을 Import하지 않을 경우모든 테스트 파일에 Tests.js 파일을 저장하여 패키지에 저장할 수 있습니다.json 폴더:

  "jest": {
     "setupTestFrameworkScriptFile": "./test/setupTests.js" }

업데이트:

Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.

https://jestjs.io/docs/en/configuration

파일 'setup테스트'를 테스트 파일로 가져와야 합니다.

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';
import "../setupTests"

test('message box', ()=> {
     ...
})

Priyank가 말한 것처럼 Create React App을 사용하는 경우 다음에서 설정을 선택합니다.src/setupTests.js.

추가:

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

configure({ adapter: new Adapter() })

이 가져오라고 요.setupTests.js테스트 파일에 저장합니다.또는 각 테스트 파일에 효소 어댑터를 구성합니다.그럼 당면한 문제가 해결되겠군요

으로는 '이렇게'를 jest.config.js이치노기동시에 셋업 파일을 실행하도록 설정할 수 있습니다.

jest.config.displays

module.exports = {
  setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.ts"
}

이 명령어는 Jeest가 기동할 때마다 setupTest.ts를 실행하도록 지시합니다.

와 같은 해야 할 이를 의 에 할 수 .setupTests파일 및 파일이 어디에서나 설정되어 있습니다.

효소 문서는 Jest와의 통합을 다루지 않기 때문에 이 둘을 융합하는 것은 혼란스럽다.

를 사용할 때는 시create-react-app을 사용하다은 파음음음음음음음음 the the the the the the 로 해야 합니다.src/setupTests.js an sTests.

setupTests.js

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

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

" " 를 실행하고 npm run test됩니다.setupTests.js수입하다

Import는 다음과 같이 사용해야 합니다.

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

이 방법: (import * as Adapter from... )는 "TypeError: Adapter is not constructor"라는 메시지를 반환합니다.

import React from 'react';파일 맨 위로 이동합니다.

JSX를 사용하고 .<MessageBox app={app}/>이 경우, 이는 변환됩니다.React.createComponent(...)이 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」React변수는 파일 범위에서 정의해야 합니다.

이렇게 해보세요.

import React from 'react';
import App from './containers/App';
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

describe('App Screen', () => {
  let mountedAppScreen;
  let props;

  const appScreen = () => {
    if (!mountedAppScreen) {
      mountedAppScreen = enzyme.mount(
        <App {...props} />
      );
    }
    return mountedAppScreen;
  }
  it("it always renders div", () => {
    const divs = appScreen().find("div");
    expect(divs.length).toBeGreaterThanOrEqual(1);
  });
});

최신 버전의 라이브러리를 사용하면 이 질문의 모든 답변에서 동일한 오류가 보고되었습니다.오류: 유형 오류: 어댑터가 생성자가 아닙니다.

React를 적절하게 테스트하기 위해 필요한 모든 단계를 그룹화했습니다.효소를 사용하는 JS 구성 요소(Jest를 사용했지만 Mocha에서도 작동할 수 있습니다. 이 경우 메인 테스트 패키지를 전환하기만 하면 됩니다):

1) 라이브러리 (package.json):

"dependencies": {
    "jest": "^24.6.0",
    (...)
}
"devDependencies": {
    "chai": "^4.2.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
   (...)
}

2) 테스트 설정: 모든 테스트에서 효소를 설정할 수 있습니다.그러나 type_master_flash가 현명하게 제안되었듯이 이를 위해 스크립트를 추가할 수 있습니다.그러기 위해서는, 패키지에 새로운 설정을 작성합니다.세션 스크립트, 종속성 등의 동일한 수준의 json 파일:

Jest 버전 23.x(또는 이전):

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupTestFrameworkScriptFile": "./tests.setup.js"
 },

Jest 24.0 버전 이후:Jest Documentation에 따르면 "setupTestFrameworkScriptFile"은 setupFilesAfterEnv를 위해 사용되지 않습니다.

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupFilesAfterEnv": ["./tests.setup.js"]
 },

이 파일은 원하는 위치에 둘 수 있으며 원하는 이름을 지정할 수 있습니다.올바른 파일 위치를 설정하는 것만 기억하십시오.이 예에서는 프로젝트의 루트에 파일을 저장하고 있습니다.

3) 테스트setup.js: 효소에서 발견한 바와 같이: TypeError: 어댑터는 컨스트럭터가 아닙니다.이 문제는 "기본 내보내기로 모듈을 Import"할 수 없다는 것입니다.적절한 파일 설정 방법은 다음과 같습니다.

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

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

이것만 있으면 컴포넌트를 테스트할 수 있습니다.

건배, 도움이 되길 바랍니다.

이 께는 이 글을 꼭 읽어주세요.setupTestFrameworkScriptFile 폐지되다setupFilesAfterEnv새로운 버전의 매뉴얼을 참조해 주세요.다음과 같이 파일을 추가할 수 있습니다.

"setupFiles": [
    "<rootDir>/src/setupTests.js"
]

로 리액트가 setupTests.js자동으로 파일링합니다.

파일인 는는 called called called called called called called called called called called called called called called called called called called called파일을 .jest.config.js에서 ""를 했습니다.

{ "jest": { "setupTestFrameworkScriptFile": "<rootDir>/path/to/your/file.js", } }

그 후, 에러는 없어졌습니다.

주의: 나중에 이 파일을 삭제했습니다.jest.config.js파일은 아직 동작하고 있습니다.

하지만 실제로 무엇이 문제의 원인인지는 확실하지 않습니다!

은 반드시 '비밀 설정'으로 .setupFilesAfterEnv의 of의 jest.config.js

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

GatsbyJs(https://www.gatsbyjs.org/docs/testing-react-components/)에서 Testing React Components with Jest를 설정한 후 이를 수정하려다 이를 발견한 사람이 있다면

서서 setup-test-env.js하다

import "@testing-library/jest-dom/extend-expect"
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

setup이라는 이름의 파일을 만듭니다.프로젝트의 루트에 있는 Tests.js.jest는 테스트 슈트를 실행하기 전에 이 파일을 자동으로 검색합니다.다음 내용을 파일에 추가합니다.

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

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

주의: 파일명은 이 설정을 Import하기 위해 same.no 가 필요로 하는 파일명이어야 합니다.tests.js 파일은 테스트 files.it에 자동으로 저장됩니다.

리액트 CRA 앱에 VS 코드와 Jest Runner 확장을 사용하는 사용자는 jest 명령어를 다음과 같이 설정하여 CRA의 내장 스크립트 러너를 사용하도록 Jest Runner를 구성하는 것을 잊지 마십시오.

npm test -- --watchAll=false

그것을 잊어버리면 토픽에서 오류가 발생합니다.또, CRA 를 사용하고 있기 때문에, 패키지로 setupFiles AfterEnv 를 설정할 수 없습니다.json도 jeok.config.displays도 없습니다.시도하면 다음 오류가 발생합니다.

패키지의 이러한 옵션.현재 Create React App에서 json Jest 구성을 지원하지 않습니다.

1. npm i enzyme-adapter-react-16 enzyme-to-json --save-dev

2. 추가package.json 여기에 이미지 설명 입력

"jest": {
       "collectCoverageFrom": [  "src/**/*.js", "!src/index.js" ]
};

3. src 폴더에 파일 2개 추가 ->

• setupTests.js

• tempPolyfills.js

4. setupTests.js:

import requestAnimationFrame from './tempPolyfills';

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

        configure({adapter: new Adapter(), disableLifecycleMethods:true});

5. tempPolyfills.js:

const requestAnimationFrame = global.requestAnimationFrame = callback => {
          setTimeout(callback,0);
      };
export default requestAnimationFrame;

6. 테스트 케이스에서 얄팍한 -> expect()가 실패했을 경우: 예:

    import { shallow } from "enzyme";
    import App from "./App";
    import toJson from 'enzyme-to-json';
    describe('App', () => {
        const app = shallow(<App />);
        it('renders correctly', () => {
            expect(toJson(app)).toMatchSnapshot();
        });
     });

그렇지 않으면 모든 것이 올바르게 설정되었다고 생각되는 경우(예를 들어 React 17용 @wojtekmaj/enzyme-adapter-react-17이 설치되어 있는 경우) Typescript에서 확인해야 할 함정이 하나 더 있습니다.

있습니까

"esModuleInterop": true,

어댑터의 Import 포맷과 일치합니까?

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';

언급URL : https://stackoverflow.com/questions/50222545/enzyme-expects-an-adapter-to-be-configured