javascript - 酶,测试一个使用useContext hook的react组件?
问题描述
如何测试使用 jest 和 Enzyme 的组件以及使用 useContext 钩子的 react 组件。
如何模拟“pValue.state.fullLang”?
src\LanguageSelect.tsx
import React, { useContext } from 'react';
import { LanguageContext } from './utils/LanguageHook';
function LanguageSelect() {
const pValue: any = useContext(LanguageContext);
return (
<div className="LanguageSelect" data-test="languageSelect-box">
<div className="languageArea">{pValue.state.fullLang}</div>
</div>
);
}
export default LanguageSelect;
src\LanguageSelect.test.tsx
import React from 'react';
import { shallow } from 'enzyme';
import LanguageSelect from './LanguageSelect';
test.only('that the LanguageSelect component exists', () => {
jest.mock('react', () => {
const ActualReact = require.requireActual('react');
return {
...ActualReact,
useContext: () => ({ state: { fullLang: 'mocked context' } }),
};
});
const wrapper = shallow(<LanguageSelect />)
expect(wrapper.find('[data-test="languageSelect-box"]').exists()).toBeTruthy()
wrapper.unmount();
})
解决方案
如果您正在单独测试该组件,那么您可以useContext
像这样模拟:
jest.mock('react', () => {
const ActualReact = require.requireActual('react');
return {
...ActualReact,
useContext: () => ({ state: { fullLang: 'mocked context' } }),
};
});
推荐阅读
- flutter - Flutter 子类 Scaffold,因此我可以确保 Drawer 和 BottomNavigationBar 始终存在
- java - 在hibernate中找出数据库条目和存储在应用程序中的条目之间的最快方法
- javascript - 在 TS/JS 中对对象数组的值求和
- php - 没有管道的MYSQL UPDATE注入
- javascript - 使用 NodeJS 将数据编码为 JWT 令牌得到错误 PEM 例程:PEM_read_bio:no start line
- nco - 如何使用 ncrcat 或 cdo 合并打包的 netcdf 文件进行连接
- php - 为什么我不能做删除功能?
- python - 如何找到两幅图像中检测到的特征之间的对应关系?
- wpf - 单击上下文菜单中的移动时,将鼠标位置设置为无边框窗口中的标题中心
- css - CSS - 如何在一个容器中显示 3 个相同大小的图像,但故意切断两侧的图像