草庐IT

javascript - Enzyme 在浅层渲染的 React 组件上为 prop 返回 null

coder 2024-07-25 原文

问题

我刚刚开始进行 enzyme 和 react 测试。我正在尝试让 enzyme 与 karma 和 webpack 在一个简单的 react 组件上一起工作。我的问题是包装器上的 prop() 返回 null，我不确定为什么。

Greeter.js

import React from 'react';

/*
 * A trivial component we added while trying to get the react testing  working
 * */

export default class Greeter extends React.Component {
constructor(props) {
    super(props);
    this.state = { name: props.initialName };

    this.greeterText = this.greeterText.bind(this);
}

greeterText() {
    return (<p>Hello, {this.state.name}!</p>);
}

render() {
    return (<div className="greeter">
        {this.greeterText()}
    </div>);
  }
}

Greeter.defaultProps = { initialName: "World" };

Greeter.propTypes = {
  initialName: React.PropTypes.string
};

greeter.spec.js

import Greeter from '../../components/test/Greeter';
import React from 'react';
import { shallow } from 'enzyme';


describe("Simple testing with shallow rendering", () => {
  beforeEach(function() {
    let initialName = "joe";
    this.wrapper = shallow(<Greeter initialName={initialName} />);
  });

  it("renders default Greeter", function() {
    console.log(this.wrapper.find(".greeter").text());
    console.log(this.wrapper.debug());
    console.log(this.wrapper.state('name'));
    expect(this.wrapper.state('name')).to.equal("joe");
    expect(this.wrapper.prop('initialName')).to.equal("joe");
   });
 });

结果

Simple testing with shallow rendering × renders default Greeter Chrome 50.0.2661 (Windows 10 0.0.0) AssertionError: expected undefined to equal 'joe' at Assertion.assertEqual >>(F:/web/forms/node_modules/chai/chai.js:776:12) at Assertion.ctx.(anonymous function) [as equal] (F:web/forms/node_modules/chai/chai.js:4192:25) at Context. (F:web/forms/spec/components/greeter.spec.js:9:2932 <- webpack:///spec/components/greeter.spec.js:18:52)

堆栈

  • react 0.14.8
  • 业力
  • 网页包
  • enzyme 2.2.0

最佳答案

如果你想像这样测试传入的 Prop ，请像这样使用mount:

  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal("baz");
    wrapper.setProps({ bar: "foo" });
    expect(wrapper.props().bar).to.equal("foo");
  });

关于javascript - Enzyme 在浅层渲染的 React 组件上为 prop 返回 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37061887/

浅层javascriptwrapperstrongGreeterreactjsenzyme

有关javascript - Enzyme 在浅层渲染的 React 组件上为 prop 返回 null的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  4. "\0"null 的 Ruby 测试？ - 2

    我在破坏脚本的字符串中出现了一些奇怪的字符。据我所知，通过putbadstring到控制台，它们是"\0\0\0\0"。我想对此进行测试，以便我可以忽略它们...但是如何呢？以为这就是blank?和empty?的用途？!？:>badstring="\0"=>"\u0000">badstring.blank?NoMethodError:undefinedmethod`blank?'for"\u0000":Stringfrom(irb):97from/Users/meltemi/.rvm/rubies/ruby-2.0.0-p195/bin/irb:16:in`'>badstring.em

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - Rails 渲染带有驼峰命名法的 json 对象 - 2

    我在一个简单的RailsAPI中有以下Controller代码:classApi::V1::AccountsControllerehead:not_foundendendend问题在于，生成的json具有以下格式:{id:2,name:'Simpleaccount',cash_flows:[{id:1,amount:34.3,description:'simpledescription'},{id:2,amount:1.12,description:'otherdescription'}]}我需要我生成的json是camelCase('cashFlows'而不是'cash_flows'

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 使用 header 渲染 JSON - 2

    我想在我的Controller中使用以下corsheader呈现JSON:'Access-Control-Allow-Origin'='*'.我试过这个:defmy_actionrender(json:some_params)response.headers['Access-Control-Allow-Origin']='*'end但是我得到了一个AbstractController::DoubleRenderError。有没有办法使用header呈现JSON？ 最佳答案 您不能在渲染后设置header，因为已发送响应。所以在没有意

  10. ruby-on-rails - Ruby 数组到 JSON 和 Rails JSON 渲染 - 2

    我有一个Ruby数组，如何在Rails3.0中将其呈现为JSONView？我的Controller方法是defautocomplete@question=Question.allend 最佳答案 如果自动完成操作仅呈现JSON，您可以将re5et的解决方案简化为:defautocompletequestions=Question.allrender:json=>questionsend(请注意，我将“问题”复数化以反射(reflect)它是一个数组并删除了@符号-一个局部变量就足够了，因为您可能只使用它来呈现内联JSON)作为一种附

随机推荐