我是 React 測驗的新手，我正在使用 jest 和酶測驗我的組件，我被困在一個地方，我想在加載整個頁面時加載我的組件，所以我在 useEffect 中使用加載事件，這是我的代碼
const RatingsAndReviews = (props: RatingsAndReviewsProps) => {
const [pageLoaded, setPageLoaded] = useState<boolean>(false)
const handleLoad = () => {
if (document.readyState === 'complete') {
setTimeout(() => {
setPageLoaded(true)
}, 1500)
}
}
React.useEffect(() => {
window.addEventListener('load', handleLoad)
return () => {
window.removeEventListener('load', handleLoad)
}
}, [])
return (...some code)
}
我想測驗這個handleLoad函式，但我無法弄清楚如何在我的組件中傳遞這個模擬函式，因為組件已經期望道具并且因為它是打字稿我不能傳遞除所需道具之外的任何其他東西，這是我的測驗用例
it('Should run handleLoad function onMount', ()=>{
jest.spyOn(React, 'useEffect').mockImplementation(f => f())
const handleLoad = jest.fn();
wrapper = mount(<RatingsAndReviews {...propObj} />)
expect(handleLoad).toHaveBeenCalled();
})
我收到這個錯誤 expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
請幫忙
uj5u.com熱心網友回復：
盡量不要mock第三方庫函式的實作，因為不正確的mock實作會破壞它的功能。例如，useEffect(effect)react hook 不只是執行effect函式。考慮，
React 延遲運行
useEffect，直到瀏覽器繪制完成。
你怎么嘲笑它？不正確的模擬會導致意外的行為。您的測驗可能會基于不正確的模擬實作而通過，但代碼在實際運行時會失敗。這就是為什么你最好不要模擬第三方庫。當然，這不是絕對的。如果第三方庫的功能簡單且自包含，則可以模擬它們。
對于 React 組件，我們應該做黑盒測驗，只測驗組件的行為和功能，而不是實作。我們應該將組件視為一個單元，而不是其中的函式。
我們應該測驗pageLoaded狀態變化時渲染的內容。
函陣列件內部定義的事件處理程式是私有的，您不能從外部訪問它們（測驗代碼）。所以你不能直接呼叫它們。相反，您應該通過用戶事件觸發它們。您的案例的load事件。
例如
index.tsx：
import React from 'react';
import { useEffect, useState } from 'react';
export const RatingsAndReviews = (props) => {
const [pageLoaded, setPageLoaded] = useState<boolean>(false);
console.log('pageLoaded: ', pageLoaded);
const handleLoad = () => {
if (document.readyState === 'complete') {
setTimeout(() => {
setPageLoaded(true);
}, 1500);
}
};
useEffect(() => {
window.addEventListener('load', handleLoad);
return () => {
window.removeEventListener('load', handleLoad);
};
}, []);
return <div>{pageLoaded ? 'loaded' : 'not loaded'}</div>;
};
index.test.tsx：
import { mount } from 'enzyme';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { RatingsAndReviews } from '.';
describe('RatingsAndReviews', () => {
it('Should run handleLoad function onMount', () => {
jest.useFakeTimers();
const wrapper = mount(<RatingsAndReviews />);
window.dispatchEvent(new Event('load'));
expect(wrapper.text()).toBe('not loaded');
act(() => {
jest.advanceTimersByTime(1500);
});
expect(wrapper.text()).toBe('loaded');
});
});
測驗結果：
PASS stackoverflow/71953030/index.test.tsx (11.883 s)
RatingsAndReviews
? Should run handleLoad function onMount (47 ms)
console.log
pageLoaded: false
at RatingsAndReviews (stackoverflow/71953030/index.tsx:7:11)
console.log
pageLoaded: true
at RatingsAndReviews (stackoverflow/71953030/index.tsx:7:11)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 93.33 | 75 | 80 | 92.86 |
index.tsx | 93.33 | 75 | 80 | 92.86 | 19
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 13.575 s, estimated 14 s
包版本：
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"jest": "^26.6.3",
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/461173.html