Javascript 测试引导组件时遇到的问题

我在测试使用React Bootstrap与摩卡、柴和酶的组件时遇到了一些困难。 希望有人能告诉我我做错了什么

在测试不使用React引导的组件时，我注意到输出是原始html（），而在测试React引导时，我只返回组件，而不是原始html（）。这在尝试测试时会引起极大的头痛。如果我使用shallow、mount和render，就会发生这种情况

如果有人知道为什么我在测试时无法获得原始html，我们将不胜感激！ 我已经包含了一些代码来显示我所说的内容

reactest.jsx

import React from 'react';

const ReactTest = () => (
  <div>
    <button>ReactTest</button>
  </div>
);

export default ReactTest;

import React from 'react';
import { Button } from 'react-bootstrap';

const ReactBootstrapTest = () => (
  <div>
    <Button>ReactBootstrapTest</Button>
  </div>
);

export default ReactBootstrapTest;

从“React”导入React；
常量反应测试=（）=>(
反应试验
);
导出默认测试；

ReactBootstrapTest.jsx

import React from 'react';

const ReactTest = () => (
  <div>
    <button>ReactTest</button>
  </div>
);

export default ReactTest;

import React from 'react';
import { Button } from 'react-bootstrap';

const ReactBootstrapTest = () => (
  <div>
    <Button>ReactBootstrapTest</Button>
  </div>
);

export default ReactBootstrapTest;

从“React”导入React；
从“react bootstrap”导入{Button}；
const ReactBootstrapTest=（）=>(
反应引导试验
);
导出默认的ReactBootstrapTest；

reactest.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');
  });
})

从“React”导入React；
从“chai”导入{expect}；
从“酶”导入{shall}；
从“../../../../../../../components/ReactTest”导入ReactTest；
从“../../../../../../components/ReactBootstrapTest”导入ReactBootstrapTest；
常量ReactTestezymentWrapper=（）=>(
浅（）
);
const reactbootstraptenzymewrapper=（）=>(
浅（）
);
仅说明（'reactest'，（）=>{
它（'应该输出调试'，（）=>{
const reactest=reactestestinezwrapper（）；
log（'reactest'，reactest.debug（））；
});
它（'应该找到'，（）=>{
const reactButton=reactTesteSynzwrapper（）.find（'button'）；
expect（reactButton.at（0.text（））.to.equal（'ReactTest'）；
});
});
description.only（'ReactBootstrapTest'，（）=>{
它（'应该输出调试'，（）=>{
const reactBootstrapTest=reactbootstraptenzymewrapper（）；
log（'ReactBootstrapTest'，ReactBootstrapTest.debug（））；
});
它（'应该找到'，（）=>{
const bootstrapButton=reactbootstraptenzymewrapper（）.find（'button'）；
expect（bootstrapButton.at（0.text（））.to.equal（'ReactBoostrapTest'）；
});
})

如果我正确理解了这个问题，问题是如果

item = shallow(<MyReactComponent>)

返回类似于

"<Button/>" 

然后使用助手函数从html中解析文本：

chai.expect(getBootstrapText(item.find('#butRemove').html())).to.equal('Remove Design');

---

我对这个解决方案不是很满意，所以我很高兴听到一个更好的解决方案，但它很有效…

您能发布测试的实际输出吗？