Enzyme 為淺渲染的 React 組件上的 prop 返回 null

Question

問題

我剛剛開始使用酶和反應測試。 我試圖讓酶在一個簡單的反應組件上與 karma 和 webpack 一起工作。 我的問題是包裝器上的prop()返回 null，我不知道為什么。

問候語

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

歡迎語.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");
   });
 });

結果

使用淺層渲染進行簡單測試 × 渲染默認 Greeter Chrome 50.0.2661 (Windows 10 0.0.0) AssertionError: expected undefined to equal to 'joe' at Assertion.assertEqual >>(F:/web/forms/node_modules/chai/chai.js :776:12) 在 Assertion.ctx.(anonymous function) [as equal] (F:web/forms/node_modules/chai/chai.js:4192:25) 在 Context。 (F:web/forms/spec/components/greeter.spec.js:9:2932 <- webpack:///spec/components/greeter.spec.js:18:52)

堆棧

• 反應 0.14.8
• 業力
• 網絡包
• 酶 2.2.0

Answer 1

如果你想測試傳入的 props 像這樣使用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");
  });

Answer 2

我相信您正在尋找的是wrapper.instance().props.nameOfProp來訪問淺層包裝器的根節點道具。

從概念上講，假設您有一個組件，它在掛載時有條件地運行 Function 道具。 這當然值得檢查，對吧？