作者:手机用户2602930645 | 来源:互联网 | 2023-09-23 17:53
当测试一个使用className来设置css类的react组件时使用酶(mount或浅)我能够正确测试它是div还是无法让它在h1标签上工作.这是一些吗?>与m
当测试一个使用className来设置css类的react组件时使用酶(mount或浅)我能够正确测试它是div还是无法让它在h1标签上工作.
这是一些吗?
>与mount或浅的事情有什么关系?
>这是我缺少的东西吗?
>这是一个错误吗?
任何想法赞赏!
JSX:
import React from 'react'
export const PageNotFound = ({heading, content, wrapperCSS, headingCSS, contentCSS}) => (
)
PageNotFound.propTypes = {
heading: React.PropTypes.string,
content: React.PropTypes.string,
wrapperCSS: React.PropTypes.string,
headingCSS: React.PropTypes.string,
contentCSS: React.PropTypes.string
};
PageNotFound.defaultProps = {
heading: '404',
content: 'Page Not Found',
wrapperCSS: 'wrapper',
headingCSS: 'heading',
contentCSS: 'content'
};
export default PageNotFound
规格:
import React from 'react'
import { expect } from 'chai'
import { shallow, mount } from 'enzyme'
import PageNotFound from './PageNotFound'
describe('', function() {
let wrapper;
beforeEach(() => {
wrapper = mount();
})
it('Uses heading prop', () => {
expect(wrapper.find('h1').text()).to.eq('My Title')
});
it('Uses headingCSS prop', () => {
console.log(wrapper.html());
expect(wrapper.find('h1.myheader').length).to.eq(1)
});
it('Uses content prop', () => {
expect(wrapper.find('div.mycontent').text()).to.eq('Message')
});
});
检测结果:
请注意调试日志,它显示带有myheader类的h1,但测试失败,找到了h1.myheader的零元素
? Uses heading prop
LOG LOG: ''
? Uses headingCSS prop
expected 0 to equal 1
r@tests.webpack.js:11:24087
assert@tests.webpack.js:14:52974
a@tests.webpack.js:14:55858
tests.webpack.js:15:17123
tests.webpack.js:14:10442
? Uses content prop
解决方法:
奇怪的.它应该工作.
无论如何,您可以尝试利用Enzyme的API.
对于这个特定的测试,.hasClass()应该完成这项工作,并且更清楚它的意图:
expect(wrapper.find('h1').hasClass('myheader')).to.eq(true)