오류 수정 방법: 구현되지 않음: 탐색(해시 변경 제외)
다음 파일이 포함된 파일에 대한 단위 테스트를 구현하고 있다.window.location.href
확인해봐야겠어
나의 농담 버전은22.0.4
. 노드 버전 >=10에서 테스트를 실행하면 모든 것이 괜찮다.
하지만 실행하면 이런 오류가 생긴다.v8.9.3
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: navigation (except hash changes)
나는 그것에 대해 전혀 모른다.나는 여기서 무슨 일이 일어났는지 알아내기 위해 해결책이나 힌트를 찾기 위해 여러 페이지를 뒤졌다.
[UPDATE] - 소스 코드를 자세히 살펴봤는데 이 오류는 jsdom에서 온 것 같아.
at module.exports (webapp/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at navigateFetch (webapp/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)
navigation.js 파일
exports.evaluateJavaScriptURL = (window, urlRecord) => {
const urlString = whatwgURL.serializeURL(urlRecord);
const scriptSource = whatwgURL.percentDecode(Buffer.from(urlString)).toString();
if (window._runScripts === "dangerously") {
try {
return window.eval(scriptSource);
} catch (e) {
reportException(window, e, urlString);
}
}
return undefined;
};
exports.navigate = (window, newURL, flags) => {
// This is NOT a spec-compliant implementation of navigation in any way. It implements a few selective steps that
// are nice for jsdom users, regarding hash changes and JavaScript URLs. Full navigation support is being worked on
// and will likely require some additional hooks to be implemented.
const document = idlUtils.implForWrapper(window._document);
const currentURL = document._URL;
if (!flags.reloadTriggered && urlEquals(currentURL, newURL, { excludeFragments: true })) {
if (newURL.fragment !== currentURL.fragment) {
navigateToFragment(window, newURL, flags);
}
return;
}
// NOT IMPLEMENTED: Prompt to unload the active document of browsingContext.
// NOT IMPLEMENTED: form submission algorithm
// const navigationType = 'other';
// NOT IMPLEMENTED: if resource is a response...
if (newURL.scheme === "javascript") {
window.setTimeout(() => {
const result = exports.evaluateJavaScriptURL(window, newURL);
if (typeof result === "string") {
notImplemented("string results from 'javascript:' URLs", window);
}
}, 0);
return;
}
navigateFetch(window);
};
not-filency.js.
module.exports = function (nameForErrorMessage, window) {
if (!window) {
// Do nothing for window-less documents.
return;
}
const error = new Error(`Not implemented: ${nameForErrorMessage}`);
error.type = "not implemented";
window._virtualConsole.emit("jsdomError", error);
};
이 파일 안에 이상한 로직들이 있어
const scriptSource = whatwgURL.percentDecode(Buffer.from(urlString)).toString();
- 그런 다음 문자열을 확인하고 오류를 반환하십시오.
내게 적합한 대체 버전jest
다음에만 해당:
let assignMock = jest.fn();
delete window.location;
window.location = { assign: assignMock };
afterEach(() => {
assignMock.mockClear();
});
참조: https://remarkablemark.org/blog/2018/11/17/mock-window-location/
나는 나의 유닛 테스트 중 하나에서 비슷한 문제에 직면했다.이것을 해결하기 위해 내가 한 일은 다음과 같다.
- 대체하다
window.location.href
…과 함께window.location.assign(url)
ORwindow.location.replace(url)
JSDOM은 여전히 에 대해 불평할 것이다.
window.location.assign
미실시Error: Not implemented: navigation (except hash changes)
그런 다음 장치 중 하나에서 다음 구성 요소/함수에 대한 테스트를 수행하십시오.
window.assign(url)
또는window.replace(url)
다음을 정의하다.sinon.stub(window.location, 'assign');
sinon.stub(window.location, 'replace');
- sinon을 가져오는지 확인하십시오.
import sinon from 'sinon';
바라건대, 이것이 나처럼 너에게 문제를 해결해 주길 바란다.
JSDOM이 에 대해 불평하는 이유Error: Not implemented: navigation (except hash changes)
JSDOM은 다음과 같은 방법을 구현하지 않기 때문이다.window.alert
,window.location.assign
등
참조:
- http://xxd3vin.github.io/2018/03/13/error-not-implemented-navigation-except-hash-changes.html
- https://www.npmjs.com/package/jsdom#virtual-consoles
대체 솔루션:위치 객체를 조롱할 수 있다.
const mockResponse = jest.fn();
Object.defineProperty(window, "location", {
value: {
hash: {
endsWith: mockResponse,
includes: mockResponse
},
assign: mockResponse
},
writable: true
});
당신은 그것을 위해 jest-location-mock 패키지를 사용할 수 있다.
CRA를 사용한 사용 예제(create-react-app)
// src/setupTests.ts
import "jest-location-mock";
문제를 설명하고 해결할 수 있는 좋은 참고자료를 찾았다: https://remarkablemark.org/blog/2018/11/17/mock-window-location/
테스트가 Node(노드)에서 실행 중이기 때문에 window.location(윈도우.location)을 이해할 수 없으므로 다음 기능을 조롱할 필요가 있다.
Ex:
delete window.location;
window.location = { reload: jest.fn() }
'Programing' 카테고리의 다른 글
새로 고침 시 VueJs 페이지 404 제공 (0) | 2022.05.22 |
---|---|
vuex에서 {dispatch, commit }에 대한 유형은? (0) | 2022.05.22 |
Vuejs에서 구성 요소를 렌더링하기 전에 데이터 가져오기 (0) | 2022.05.22 |
우리 리눅스 앱에서 libc(glibc)의 역할은? (0) | 2022.05.22 |
Vue에서 양식 데이터를 올바르게 초기화하는 방법 (0) | 2022.05.21 |