jeast spy인덱스 파일에서 작동하지 않으므로 속성을 재정의할 수 없습니다.
있습니다UserContext
그리고 갈고리useUser
에서 내보낸src/app/context/user-context.tsx
또한 index.tsx 파일도 있습니다.src/app/context
모든 자모듈을 내보냅니다.
감시하는 경우src/app/context/user-context
동작하지만 Import를 로 변경합니다.src/app/context
이해:
TypeError: Cannot redefine property: useUser at Function.defineProperty (<anonymous>)
왜 그런 것일까요?
소스 코드:
// src/app/context/user-context.tsx
export const UserContext = React.createContext({});
export function useUser() {
return useContext(UserContext);;
}
// src/app/context/index.tsx
export * from "./user-context";
// *.spec.tsx
// This works:
import * as UserContext from "src/app/context/user-context";
// This does not work:
// import * as UserContext from "src/app/context";
it("should render complete navigation when user is logged in", () => {
jest.spyOn(UserContext, "useUser").mockReturnValue({
user: mockUser,
update: (user) => null,
initialized: true,
});
})
사용방법에 동의할 수 없습니다.jest.mock()
대신spyOn()
(여기)가 좋은 해결책입니다.이 방법에서는 스펙 파일 상단에 있는 모든 기능을 한 번 시뮬레이션해야 합니다.
그러나 일부 테스트 케이스는 다른 설정이 필요하거나 실제 상태를 유지할 수 있습니다.
어쨌든 계속 쓰고 싶다spyOn()
.
더 나은 방법은 스펙 파일 상단에 다음 행을 추가하는 것입니다(가져오기 직후와 이전).describe()
).
import * as Foo from 'path/to/file';
jest.mock('path/to/file', () => {
return {
__esModule: true, // <----- this __esModule: true is important
...jest.requireActual('path/to/file')
};
});
...
//just do a normal spyOn() as you did before somewhere in your test:
jest.spyOn(Foo, 'fn');
추신: 원라이너일 수도 있습니다.
jest.mock('path/to/file', () => ({ __esModule: true, ...jest.requireActual('path/to/file') }));
추신'path/to/file'
적어도 지금 이 순간에는 안 먹혔어그래서 슬프게도 당신은 실제 경로를 3번 반복해야 합니다.
저장
재수출을 위해 생성된 js 코드를 보면 다음과 같습니다.
Object.defineProperty(exports, "__esModule", {
value: true
});
var _context = require("context");
Object.keys(_context).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _context[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _context[key];
}
});
});
컴파일러가 추가하지 않았기 때문에 발생하는 오류입니다.configurable: true
의 선택사항으로defineProperty
docs로부터의 export를 조롱하기 위해 joke를 재정의할 수 있습니다.
설정 가능한
true는 이 속성 설명자의 유형을 변경할 수 있고 해당 속성이 해당 개체에서 삭제될 수 있는 경우입니다.기본값은 입니다.
컴파일러가 추가하도록 설정을 조정할 수 있다고 생각합니다만, 사용하는 툴에 따라 다릅니다.
보다 접근하기 쉬운 접근법은jest.mock
대신jest.spyOn
설정 불가능한 내보내기를 재정의하지 않고 사용자 지정 파일을 조롱합니다.
it("should render complete navigation when user is logged in", () => {
jest.mock('./user-context', () => {
return {
...jest.requireActual('./user-context'),
useUser: jest.fn().mockReturnValue({
user: {},
update: (user: any) => null,
initialized: true
})
}
})
});
그UserContext
에서 재취득할 때app/context/index.tsx
3.9 이전 버전에서 재export 처리 방법에 대한 Typescript의 버그이기 때문에 이 문제가 발생합니다.
이 문제는 버전 3.9에서 수정되었으므로 프로젝트의 유형 스크립트를 이 버전 이상으로 업그레이드하십시오.
다음은 버전을 업그레이드하지 않은 경우의 회피책입니다.
에 오브젝트가 있습니다.index.tsx
Import된 메서드로 속성이 포함된 파일을 만든 다음 개체를 내보냅니다.
안에서.src/app/context/index.tsx
import { useUser } from './context/user-context.tsx'
const context = {
useUser,
otherFunctionsIfAny
}
export default context;
아니면 이것도 효과가 있을 거야
import * as useUser from './context/user-context.tsx';
export { useUser };
export default useUser;
그럼 그들을 감시하고
import * as UserContext from "src/app/context";
it("should render complete navigation when user is logged in", () => {
jest.spyOn(UserContext, "useUser").mockReturnValue({
user: mockUser,
update: (user) => null,
initialized: true,
});
});
주의할 점:- 이전 버전에서는 재내보내기 문제 외에 라이브바인딩도 지원되지 않았습니다.즉, 내보내기 모듈이 변경되었을 때 Import 모듈이 내보내기 측에서 변경되었음을 확인할 수 없었습니다.
예:
Test.js
let num = 10;
function add() {
++num; // Value is mutated
}
exports.num = num;
exports.add = add;
index.displaces를 표시합니다.
비슷한 문제이지만 Import 경로로 인해 발생합니다.
이 오류 메시지(JavaScript)의 이유는 다음 TypeError: 속성을 재정의할 수 없습니다. Function.defineProperty()
에는 다시 게 요.index.tsx
에 useSteps
「 」 「 」 、 「 」
폴더 구조는 다음과 같습니다.
hooks/useSteps/
index.tsx
useSteps/useSteps.tsx
식이었어요.import * as step from './hooks/useSteps';
이 이어야 한다import * as step from './hooks/useSteps/useSteps';
언급URL : https://stackoverflow.com/questions/67872622/jest-spyon-not-working-on-index-file-cannot-redefine-property
'source' 카테고리의 다른 글
MongoDB에서 프라이머리 키를 설정하는 방법 (0) | 2023.03.28 |
---|---|
구성 요소 외부에 있는 클릭 이벤트를 수신하는 방법 (0) | 2023.03.28 |
React Native 투명 오버레이 (0) | 2023.03.28 |
Redux, 데이터에 액세스하려면 모든 컨테이너에 있는 스토어를 가져와야 합니까? (0) | 2023.03.28 |
WordPress / WooCommerce 테마 개발은 어디서부터 시작할까요? (0) | 2023.03.28 |