[英]Issues Testing React-Bootstrap Components
I am having some difficulties when testing components that use React-Bootstrap with Mocha, Chai, and Enzyme. 在测试使用React-Bootstrap与Mocha,Chai和Enzyme的组件时,我遇到了一些困难。 Hopefully someone can key me into what I am doing wrong. 希望有人可以让我知道我做错了什么。
When testing components that do not use React-Bootstrap, I notice that the output is raw html() where as when testing React-Bootstrap I am only getting back the component and not raw html (). 在测试不使用React-Bootstrap的组件时,我注意到输出是原始的html(),当测试React-Bootstrap时,我只返回组件而不是原始的html()。 This is causing a huge headache when trying to test. 这在尝试测试时引起了巨大的麻烦。 This happens if I use shallow, mount, and render. 如果我使用浅,mount和render,就会发生这种情况。
If anyone has a clue as to why I cannot get raw html when testing that would be greatly appreciated! 如果有人有一个线索,为什么我不能得到原始的HTML测试时将非常感谢! I have included some code to show what I am talking about. 我已经包含了一些代码来展示我在说什么。
ReactTest.jsx ReactTest.jsx
import React from 'react';
const ReactTest = () => (
<div>
<button>ReactTest</button>
</div>
);
export default ReactTest;
ReactBootstrapTest.jsx ReactBootstrapTest.jsx
import React from 'react';
import { Button } from 'react-bootstrap';
const ReactBootstrapTest = () => (
<div>
<Button>ReactBootstrapTest</Button>
</div>
);
export default ReactBootstrapTest;
reactTest.js reactTest.js
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import ReactTest from '../../../../../../components/ReactTest';
import ReactBootstrapTest from '../../../../../../components/ReactBootstrapTest';
const reactTestEnzymeWrapper = () => (
shallow(<ReactTest />)
);
const reactBootstrapTestEnzymeWrapper = () => (
shallow(<ReactBootstrapTest />)
);
describe.only('ReactTest', () => {
it('should output debug', () => {
const reactTest = reactTestEnzymeWrapper();
console.log('ReactTest', reactTest.debug());
});
it('should find the <button>', () => {
const reactButton = reactTestEnzymeWrapper().find('button');
expect(reactButton.at(0).text()).to.equal('ReactTest');
});
});
describe.only('ReactBootstrapTest', () => {
it('should output debug', () => {
const reactBootstrapTest = reactBootstrapTestEnzymeWrapper();
console.log('ReactBootstrapTest', reactBootstrapTest.debug());
});
it('should find the <button>', () => {
const bootstrapButton = reactBootstrapTestEnzymeWrapper().find('button');
expect(bootstrapButton.at(0).text()).to.equal('ReactBoostrapTest');
});
})
If I understand the question correctly the problem is that if 如果我正确地理解了这个问题,问题就是如果
item = shallow(<MyReactComponent>)
and MyReactComponent
contains a React Bootstrap item with, say, id = itemId
then 和MyReactComponent
包含一个React Bootstrap项目,比如id = itemId
item.find('#itemId').text()
returns something like 返回类似的东西
"<Button/>"
and not the actual text in the Button. 而不是Button中的实际文本。 Same applies if you find by class or the component name. 如果您按类或组件名称找到,则同样适用。
I have worked around this by using: 我使用以下方法解决了这个问题:
item.find('#itemId').html()
and then using a helper function to parse out the text from the html: 然后使用辅助函数从html中解析出文本:
chai.expect(getBootstrapText(item.find('#butRemove').html())).to.equal('Remove Design');
I'm not very happy with this solution so would be glad to hear of a better one, but it works... 我对这个解决方案不是很满意,所以很高兴听到一个更好的解决方案,但它有效......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.