Issues Testing React-Bootstrap Components

Question

I am having some difficulties when testing components that use React-Bootstrap with Mocha, Chai, and 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 (). This is causing a huge headache when trying to test. This happens if I use shallow, mount, and render.

If anyone has a clue as to why I cannot get raw html when testing that would be greatly appreciated! I have included some code to show what I am talking about.

ReactTest.jsx

import React from 'react';

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

export default ReactTest;

ReactBootstrapTest.jsx

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

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

export default ReactBootstrapTest;

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

Can you post the actual output from the tests? – Ben Hare Dec 14 '16 at 04:06 — Ben Hare, Dec 14 '16 at 04:06

score 0 · Answer 1 · edited Jan 08 '17 at 12:22

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

item.find('#itemId').text()

returns something like

"<Button/>"

and not the actual text in the 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:

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...

Issues Testing React-Bootstrap Components

1 Answers1