javascript - 使用 Enzyme Jest 查找 HTML 元素测试 React 组件
问题描述
我有一个名为的组件Typography
,它接受一个variant
道具并相应地呈现一个元素。
排版.js
为了简洁省略了很多
import { StyledH1, ... } from './Typography.styles';
const variantMapping = {h1: StyledH1, ...};
const Typography = ({ children, ...props }) => {
const Component = variantMapping[props.variant] ? variantMapping[props.variant] : 'span';
return <Component {...props}>{children}</Component>;
};
因此,我尝试了多种方法来获得有效的测试。现在我正在尝试通过variant="h1"
,取回以下标记<h1 class="..styled component what nots...">...</h1>
并验证<h1>
渲染
Typography.spec.js
import { mount } from 'enzyme';
import Typography from '.';
describe('<Typography />', () => {
it('renders H1', () => {
const wrapper = mount(<Typography variant="h1" />);
const elem = wrapper;
console.log(elem.debug());
expect(wrapper.find('h1')).toEqual(true);
});
});
所以运行调试器我回来了
console.log components/Typography/Typography.spec.js:9
<Typography variant="h1" bold={false} transform={{...}} small={false}>
<Typographystyles__StyledH1 variant="h1" bold={false} transform={{...}} small={false}>
<StyledComponent variant="h1" bold={false} transform={{...}} small={false} forwardedComponent={{...}} forwardedRef={{...}}>
<h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />
</StyledComponent>
</Typographystyles__StyledH1>
</Typography>
所以我改变了元素变量以找到 h1 元素
const elem = wrapper.find('h1');
调试器返回
console.log components/Typography/Typography.spec.js:9
<h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />
我不确定这是否是正确的方法,只是尝试获得至少 1 次合理通过的测试。
在这一点上,我写的每条expect
语句都会返回错误或失败
expect(elem).to.have.lengthOf(1);
TypeError:无法读取未定义的属性“拥有”expect(elem.contains('h1')).to.equal(true);
TypeError:无法读取未定义的属性“等于”expect(elem.contains('h1')).toEqual(true);
expect(received).toEqual(expected) // 深度相等
尝试了更多选项,但没有任何效果。任何帮助将不胜感激。
解决方案
所以看起来我的断言,使用酶,expect
没有设置。进一步阅读 Enzyme 文档后,我的设置仅使用适配器,以便更轻松地渲染/安装组件。我没有能力使用文档中的酶断言,因为它们没有安装。为了回答这个特殊问题,我必须使用 Jest 断言。
describe('<Typography />', () => {
it('renders h1', () => {
const wrapper = mount(<Typography variant="h1" />);
const elem = wrapper.find('h1');
expect(elem.length).toBe(1);
});
});
推荐阅读
- r - R 删除具有最多零值的行(唯一并删除所有 0 的行不起作用)
- python - python中的烛台图..尽管找到了所有示例-无法修复周末/节假日的空白日期
- java - java - 如何修复“从活动上下文外部调用startActivity()需要...”错误
- leaflet - 如何从用户输入的 ArcGIS 投影数据中计算出分辨率数组
- swift - Parse - 使用云代码发送推送通知 (Swift)
- javascript - 嵌入消息的记录字段
- javascript - 使用数组访问(深度)嵌套对象属性
- postgresql - PostgresSQL 无法读取我桌面上的 csv 文件
- xamarin - 自定义渲染器在 iOS 上的行为不符合预期
- c# - 如何从另一个 Ienumerable 获取 SelectList