ReactTestUtils中的图像源的意外评估结果

问题描述：

我收到了一些ReactTestUtils的意外测试结果。下面是代码：ReactTestUtils中的图像源的意外评估结果

源：

var React = require('react'); 

module.exports = React.createClass({ 
    render() { 
    var data = this.props.data; 

    return (
     <div> 
     <img className="photo" src={data['photograph-url']} alt={data['photograph-caption']}/> 
     </div> 
    ); 
    } 
});

通过使用玩笑

var React = require('react/addons'); 
    var TestUtils = React.addons.TestUtils; 
    var data = { 
     "photograph-url": "photograph url", 
     "photograph-caption": "photograph caption" 
    }; 

    var details = TestUtils.renderIntoDocument(
     <Details data={data}/> 
    ); 
    var photo = TestUtils.findRenderedDOMComponentWithClass(details, "photo").getDOMNode(); 

expect(agentPhoto.src).toEqual('photograph url');

令人惊讶的测试，测试失败，因为agentPhoto.src的结果返回“/用户/ ..... /照片网址“，这是我的文件夹路径。

然而，我改变了“照片网址”真正的http源图像“http：// ...”。它工作正常。

我不知道是什么原因，事先说

非常感谢背后

你是如何运行你的玩笑测试？本地服务的HTML？命令行？咕噜/咕嘟咕嘟？ – PetersenDidIt

命令行，我正在使用grunt。我运行测试的方式只是“开玩笑” –

答

我最好的猜测是jsdom正在试图找出如何解决相对URL photograph url因为它正在从一个目录中运行你的直接解决它。

您可以使用一个假的HTTP地址为您的测试数据或验证的道具，而不是DOM元素是这样的：

var React = require('react/addons'); 
var TestUtils = React.addons.TestUtils; 
var data = { 
    "photograph-url": "photograph url", 
    "photograph-caption": "photograph caption" 
}; 

var details = TestUtils.renderIntoDocument(
    <Details data={data}/> 
); 
var photo = TestUtils.findRenderedDOMComponentWithClass(details, "photo"); 

expect(photo.props.src).toEqual("photograph url");

我认为不同之处在于“props.src”而不是“src”。但是，结果是“无法读取未定义的属性'src'”。 –

ReactTestUtils中的图像源的意外评估结果

相关推荐