Jest에서 조롱된 서비스로 인해 "The module factory of jest.mock() is not allowed to reference any of scope variables" 오류가 발생합니다.

Jest에서 조롱된 서비스로 인해 "The module factory of jest.mock() is not allowed to reference any of scope variables" 오류가 발생합니다.

서비스에 대한 호출을 조롱하려고 하는데 다음 메시지에 어려움을 겪고 있습니다.의 모듈 공장에서는 범위 밖의 변수를 참조할 수 없습니다.

ES6 구문, 농담, 효소를 가진 바벨을 쓰고 있어요

이 컴포넌트는 다음과 같은 컴포넌트가 있습니다.Vocabulary리스트가 표시됩니다.VocabularyEntry- 의 오브젝트vocabularyService렌더링합니다.

import React from 'react';
import vocabularyService from '../services/vocabularyService';

export default class Vocabulary extends React.Component {
    render() {

        let rows = vocabularyService.vocabulary.map((v, i) => <tr key={ i } >
            <td>{ v.src }</td>
            <td>{ v.target }</td>
        </tr>);
        // render rows
    }
}

그vocabularyServise매우 간단합니다.

import { VocabularyEntry } from '../model/VocabularyEntry';

class VocabularyService {

    constructor() {
        this.vocabulary = [new VocabularyEntry("a", "b")];
    }
}
export default new VocabularyService();

이제 나는 조롱하고 싶다.vocabularyService테스트의 경우:

import { shallow } from 'enzyme';
import React from 'react';
import Vocabulary from "../../../src/components/Vocabulary ";
import { VocabularyEntry } from '../../../src/model/VocabularyEntry'

jest.mock('../../../src/services/vocabularyService', () => ({

    vocabulary: [new VocabularyEntry("a", "a1")]

}));

describe("Vocabulary tests", () => {

    test("renders the vocabulary", () => {

        let $component = shallow(<Vocabulary/>);

        // expect something

    });
});

테스트를 실행하면 다음 오류가 발생합니다.Voculary.spec.js: babel-plugin-jest-hoist:모듈 팩토리jest.mock()에서는 Out-of-Signal 변수를 참조할 수 없습니다.잘못된 변수 액세스:어휘 엔트리

제가 이해하지 못하는 한, Vocarious Entry는 선언되지 않았기 때문에 사용할 수 없습니다(joke가 모의 정의를 파일 맨 위로 이동하기 때문에).

제가 이걸 어떻게 고칠 수 있는지 설명해 주실 수 있나요?모킹콜에서 레퍼런스가 필요한 솔루션을 봤는데 클래스 파일로 어떻게 해야 하는지 모르겠어요.

조롱된 구성 요소를 이름에 "mock"이 앞에 붙은 변수에 저장해야 합니다.이 솔루션은 오류 메시지 끝에 있는 메모를 기반으로 합니다.

주의: 이는 초기화되지 않은 모의 변수를 방지하기 위한 예방책입니다.모크가 느슨하게 필요한 것이 확인되면 변수 이름 앞에 다음과 같이 붙습니다.mock허용됩니다.

import {shallow} from 'enzyme';
import React from 'react';
import Vocabulary from "../../../src/components/Vocabulary ";
import {VocabularyEntry} from '../../../src/model/VocabularyEntry'

const mockVocabulary = () => new VocabularyEntry("a", "a1");

jest.mock('../../../src/services/vocabularyService', () => ({
    default: mockVocabulary
}));

describe("Vocabulary tests", () => {

test("renders the vocabulary", () => {

    let $component = shallow(<Vocabulary/>);

    // expect something

});

문제는 이 모든 것이jest.mock는 컴파일 시 실제 코드 블록의 맨 위로 올라갑니다.이 경우는 파일의 맨 위입니다.이 시점에서VocabularyEntry는 Import되지 않습니다.그 안에다가mock에 있어서beforeAll테스트 또는 사용 중 차단jest.mock다음과 같습니다.

import {shallow} from 'enzyme';
import React from 'react';
import Vocabulary from "../../../src/components/Vocabulary ";
import {VocabularyEntry} from '../../../src/model/VocabularyEntry'
import vocabularyService from '../../../src/services/vocabularyService'

jest.mock('../../../src/services/vocabularyService', () => jest.fn())

vocabularyService.mockImplementation(() => ({
  vocabulary: [new VocabularyEntry("a", "a1")]
}))

이것은 먼저 단순한 스파이 기능으로 모듈을 조롱하고 모든 것을 Import한 후 실제 모의 구현을 설정합니다.

새로운 Jest [내 경우 19~21]로 업그레이드 할 때 유사한 오류가 발생할 경우 변경을 시도할 수 있습니다.jest.mock로.jest.doMock.

여기서 찾을 수 있습니다– https://github.com/facebook/jest/commit/6a8c7fb874790ded06f4790fdb33d8416a7284c8

jest.mock("../../../src/services/vocabularyService", () => {
  // eslint-disable-next-line global-require
  const VocabularyEntry = require("../../../src/model/VocabularyEntry");

  return {
    vocabulary: [new VocabularyEntry("a", "a1")]
  };
});

동적 Import에도 사용할 수 있어야 합니다.require하지만 잘 되지 않았어요

를 는 경우jest.fn()모듈에서는, 에 의해서 조롱당했습니다.jest.mock두 번째

1. 은 '아까보다'로 시작해야 .mock.
2. 요.coolFunction: mockCoolFunction 「」로 .coolFunction: (...args) => mockCoolFunction(...args)을 알 필요가 mockCoolFunction기능을 실행하지 않은 경우입니다.

상세한 것에 대하여는, 이 블로그의 투고를 추천합니다.

이 문제는 react-native-git-upgrade를 사용하여 react-native 프로젝트를 v0.61로 업그레이드한 후 시작되었습니다.

내가 할 수 있는 모든 것을 시도한 후에.프로젝트와 모든 테스트를 다시 시작하기로 결심했습니다.

# react-native-clean-project

단, react-native-clean-project 실행 시 native-clean-project 실행 시 네이티브코드를 포함한 모든 ios 및 안드로이드 폴더를 삭제할 수 있으므로 프롬프트가 뜨면N으로 응답해 주세요.제 경우 weep node_modules 폴더를 선택했을 뿐입니다.

언급URL : https://stackoverflow.com/questions/44649699/service-mocked-with-jest-causes-the-module-factory-of-jest-mock-is-not-allowe