我试图模拟具有以下结构的组件:
//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>
}
我正试图使用以下内容进行测试:
//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很新,所以在合理的方向上任何推动都会受到赞赏。
好的,我想我知道发生了什么:
var a_form = React.createElement(require.requireMock("./A_Form");
看起来是抛出错误的那一行。 require.requireMock("./A_Form")
生成一个对象(React.createElement
需要一个组件或字符串):
{
... A_Form,
updateState: jest.fn( () => { return; } )
}
如果我理解正确,您想要返回一个Component,并覆盖updateState
方法。然而,你最终做的是用A_Form
的所有方法和字段生成一个对象(如果那样,我认为你不能解压这样的对象 - 对我来说,至少,Babel抱怨解压缩)和updateState
方法。
不幸的是,在React中进行方法覆盖并不是一个好的,简单的方法 - 看看this post,我认为它会指向正确的方向。在高级别,您只需提供在创建组件时覆盖组件的方法,而不是覆盖。
在React中还有libraries用于“真正的”OO ......虽然看起来有点过分。
你可以尝试类似的东西
return React.createComponent({ ...A_Form, updateState: () => {});
但不确定它是否会起作用。