首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >酶对浅呈现反应元件上的支柱返回null

酶对浅呈现反应元件上的支柱返回null
EN

Stack Overflow用户
提问于 2016-05-05 23:28:19
回答 2查看 7.2K关注 0票数 8

问题

我刚开始做酶和反应测试。我试图让酶与业力和webpack一起工作在一个琐碎的反应部件上。我的问题是包装器上的prop()返回null,我不知道为什么。

Greeter.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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");
   });
 });

结果

简单的浅层渲染测试×呈现默认的Greeter 50.0.2661 (Windows100.0.0) AssertionError:在Assertion.assertEqual、Assertion.ctx.(匿名函数) as equal的上下文中未定义为等于'joe‘。(F:web/forms/spec/components/greeter.spec.js:9:2932 <- webpack:///spec/components/greeter.spec.js:18:52)

Stack

  • 反应0.14.8
  • 因果报应
  • webpack
  • 酶2.2.0
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-05 23:52:57

如果您想测试传入的道具,请使用mount,如下所示:

代码语言:javascript
复制
  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");
  });
票数 4
EN

Stack Overflow用户

发布于 2020-07-31 16:04:59

我相信您要寻找的是wrapper.instance().props.nameOfProp来访问浅包装器的根节点支持。

从概念上讲,假设您有一个组件,它在挂载时有条件地运行函数支柱。这当然值得一查,对吧?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37061887

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档