您好,登錄后才能下訂單哦!
useCallback
是 React Hooks 中的一個功能,它用于將函數(shù)包裝在一個記憶化的容器中,以避免不必要的重新渲染
npm install --save react
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
MyComponent.js
的文件,其中包含使用 useCallback
的組件:import React, { useCallback } from 'react';
const MyComponent = ({ onClick }) => {
const handleClick = useCallback(() => {
onClick('Hello, World!');
}, [onClick]);
return (
<button onClick={handleClick}>
Click me
</button>
);
};
export default MyComponent;
MyComponent.test.js
的測試文件:import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('should call onClick with "Hello, World!" when button is clicked', () => {
const onClick = jest.fn();
const { getByText } = render(<MyComponent onClick={onClick} />);
fireEvent.click(getByText('Click me'));
expect(onClick).toHaveBeenCalledWith('Hello, World!');
});
});
package.json
中添加測試腳本:{
"scripts": {
"test": "jest"
}
}
npm test
這個測試用例會檢查當按鈕被點擊時,onClick
函數(shù)是否被調用,并傳遞了正確的參數(shù)。注意,我們使用了 @testing-library/react
和 @testing-library/jest-dom
庫來簡化測試過程。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。