您好,登錄后才能下訂單哦!
在Jest中測(cè)試使用了Context的React組件,需要確保在測(cè)試環(huán)境中正確地設(shè)置和傳遞Context
MyContext.js
的文件,其中包含你的Context:import React from 'react';
const MyContext = React.createContext();
export default MyContext;
MyProvider.js
的文件,其中包含提供Context的組件:import React, { useState } from 'react';
import MyContext from './MyContext';
const MyProvider = ({ children }) => {
const [value, setValue] = useState('default value');
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};
export default MyProvider;
MyComponent.js
的文件,其中包含使用Context的組件:import React, { useContext } from 'react';
import MyContext from './MyContext';
const MyComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
<p>Current value: {value}</p>
<button onClick={() => setValue('new value')}>Change value</button>
</div>
);
};
export default MyComponent;
MyComponent.test.js
的文件,其中包含使用Jest和React Testing Library測(cè)試組件的代碼:import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
import MyProvider from './MyProvider';
describe('MyComponent', () => {
it('renders the default value and updates it when the button is clicked', () => {
render(
<MyProvider>
<MyComponent />
</MyProvider>
);
expect(screen.getByText('Current value: default value')).toBeInTheDocument();
fireEvent.click(screen.getByText('Change value'));
expect(screen.getByText('Current value: new value')).toBeInTheDocument();
});
});
在這個(gè)例子中,我們使用MyProvider
將MyComponent
包裹起來(lái),以便在測(cè)試環(huán)境中提供正確的Context。然后,我們使用React Testing Library的render
、fireEvent
和screen
方法來(lái)渲染組件、模擬點(diǎn)擊事件并檢查屏幕上的文本是否符合預(yù)期。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。