javascript - 可能是我的一个简单的 Jest/ react 错误

Question

我正在尝试模拟具有以下结构的组件:

//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>
    }

我正在尝试使用以下内容 Jest 测试它:

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

我想我已经包含了所有相关代码。我坚持调用 renderIntoDocument，因为它返回“不变违规:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:对象。”。

由于我是 Jest 和 React 的新手，任何向合理方向的插入都将不胜感激。

Answer 1

好的，我想我知道发生了什么:

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

看起来是引发错误的行。 require.requireMock("./A_Form") 生成一个对象(React.createElement 需要一个组件或字符串):

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

如果我没理解错的话，你想返回一个覆盖了 updateState 方法的组件。但是，您最终所做的是生成一个包含 A_Form 的所有方法和字段的对象(如果是这样，我认为您无法解压这样的对象 - 至少对我而言) , Babel 提示那个解包)和一个 updateState 方法。

不幸的是，在 React 中并没有真正好的、简单的方法来覆盖方法——看看 this post ，我认为它会为您指明正确的方向。在高层次上，您只需提供在创建组件时要覆盖的方法，而不是覆盖。

还有libraries对于 React 中的“真正的”面向对象……虽然它看起来有点过分。

你可以尝试类似的东西

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

但不确定它是否会起作用。