我可能是一个简单的玩笑/反应错误

Question

I am trying to mock a component that has the following structure:

//A_Form.js
import React from "react";

export default React.createClass({
    displayname: "A_Form",

    updateState: function() {
        // I want to mock this function as it opens a web connection
    }    
    render: function() {
        return ( 
            <form>
                <div className='class1'>
                    <label htmlFor="name"> name </label>
                </div>
            </form>
    }

I'm trying to test this with jest using the following:

//A_Form.spec.js
import React
import {A_Form} from './A_Form';

function mock_A_Form() {
    var A_Form = React.createElement(require.requireActual("./A_Form");
    return {
        ... A_Form,
        updateState: jest.fn( () => { return; } )
    }
jest.mock("./A_Form",() => { return mock_A_Form(); } );

describe("A_Form test",function() {
    var ReactTestUtils = require('react-addons-test-utils');
    var a_form = React.createElement(require.requireMock("./A_Form");

    it("checking",function() {
        var n = "name";
        var rendered_a_form = ReactTestUtils.renderIntoDocument(a_form);
        var my_name = ReactTestUtils.findRenderedDOMComponentWithTag(rendered_a_form,"label");
        expect(my_name.textContent).toBe(n);
    });
});

I think I have included all of the relevant code. I am stuck with I call renderIntoDocument as it returns "Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.".

As I am rather new to Jest and React any push in reasonable direction would be appreciated.

Answer 1

Ah ok, I think I see what's going on:

var a_form = React.createElement(require.requireMock("./A_Form");

looks to be the line that's throwing the error. require.requireMock("./A_Form") produces an object ( React.createElement requires a component or string):

{
    ... A_Form,
    updateState: jest.fn( () => { return; } )
}

If I understand correctly, you want to return a Component, with the updateState method overwritten. However, what you've ended up doing is producing an object with all the methods and fields of A_Form (if that, I don't think you can unpack an object like that - for me, at least, Babel complains about that unpacking) and an updateState method.

Unfortunately, there's not really a good, easy way to just do method overrides in React - take a look at this post , I think it'll point you in the right direction. At a high level, instead of overriding, you'll just be supplying methods to be overriden to the component when you create them.

There are also libraries for "true" OO in React... although it seems kind of excessive.

You can try something like

return React.createComponent({ ...A_Form, updateState: () => {}); 

not sure if it'll work, though.