Testing methods inside a ReactJS component?

Question

I'm new to TDD and unit testing my js, and am looking into using the mocha/react shallow renderer to test my React components. My test component looks something like this:

var React = require('react');

var test = React.createClass({

    render: function() {

        return (
            <div>My custom test component ({this.props.testAttribute})</div>
        );
    },

    testFunction: function () {
        return true;
    }

});

module.exports = test;

So in addition to shallow rendering and making sure the component is rendering the way i need it to (which i can do now), i also want to test testFunction(), and make sure that is behaving as well. How would I go about doing that?

Nicole · Accepted Answer · 2016-03-23 07:48:06Z

2

I think this depends on what kind of function your testFunction is.

If it is closely related to the rendering, e.g. it is an onClickHandler, then I would test this in combination with the rendering. Shallow rendering might not be sufficient here, you may need a real DOM (check out jsDOM and/or the enzyme testing library).

If the function does some calculations that are not tightly coupled to the rendering, then you might consider extracting it to its own file (think of aspects like modularity and separation of concerns here). This way, you can test it individually just like any other JavaScript code.

If you actually want to test the function individually while it is inside the component, you need a real DOM. A mocha/must test would look like this:

import jsdom from "jsdom";
import TestUtils from "react/lib/ReactTestUtils";

describe("Component Test", function () {

    beforeEach(function () {
        global.document = jsdom.jsdom("<!doctype html><html><body></body></html>");
        global.window = global.document.defaultView;

        this.component = TestUtils.renderIntoDocument(<MyComponent/>);
    });

    afterEach(function () {
        delete global.document;
        delete global.window;
    });


   it("test the function", function () {
        expect(this.component.testFunction()).to.be(true);
    });
});

edited Mar 23, 2016 at 7:48

answered Mar 22, 2016 at 21:02

Nicole

1,7071 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gerald Over a year ago

Thanks Nicole. I was actually contemplating the same idea, of pushing the testFunction into another module and just requiring it. This would make testing very straightforward. Right now, i'm trying to find the right combination of testing libraries that will allow me to easily test code that is written like the sample component, since this is how a lot of our codebase was originally written.

Nicole Over a year ago

Thanks gerald for the explanation. I dug a bit deeper into this and added an example of how you should be able to achieve what you want.

gerald Over a year ago

That worked like a charm! This is perfect, thank you so much for the help!

Collectives™ on Stack Overflow

Testing methods inside a ReactJS component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related