[英]How to test styles and media queries rendered by a React component with Jest and/or Enzyme
[英]How to test if element(tag) rendered with jest/enzyme?
我不明白如何正确渲染元素。 我写了这样的测试:
const props = {
type: 'test_plan',
renewal: '25.06.2019',
subscriptionName: 'Test',
};
test('test component elements render', () => {
const wrapper = mount(<Component {...props} />);
console.log(wrapper.debug())
expect(wrapper.find('.link')).to.have.lengthOf(0);
expect(wrapper.find('type')).to.have.lengthOf(1);
});
这是我在控制台中调试组件时的内容:
<div className="wrapper">
<div className="mobile">
<h3>
Test
</h3>
</div>
<div className="inner">
<h3>
Test
</h3>
<div className="type">
<h4>
Test Type 1
</h4>
<span>
25.06.2019
</span>
</div>
</div>
</div>
这是我Cannot read property 'have' of undefined
如何正确测试组件中的元素是否呈现?
因此,您既可以要求Chai
expect
,也可以使用Chai
断言:
import * as React from 'react';
import { mount } from 'enzyme';
const expect = require('chai').expect; // <= use expect from Chai
const Component = () => (<div><div className="type"></div></div>);
test('test component elements render', () => {
const wrapper = mount(<Component />);
expect(wrapper.find('.link')).to.have.lengthOf(0); // Success!
expect(wrapper.find('.type')).to.have.lengthOf(1); // Success!
});
...或者您可以使用Jest
包含的.toHaveLength
断言:
import * as React from 'react';
import { mount } from 'enzyme';
const Component = () => (<div><div className="type"></div></div>);
test('test component elements render', () => {
const wrapper = mount(<Component />);
expect(wrapper.find('.link')).toHaveLength(0); // Success!
expect(wrapper.find('.type')).toHaveLength(1); // Success!
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.