在Jest单元测试中访问React Component中的mobx observable属性

时间:2017-06-13 18:21:24

标签: javascript reactjs jestjs mobx

以下是我的组件。 mobx状态就在组件的主体中,我不会为它创建一个单独的商店。

我的问题是如何在jest /酶单元测试中访问那些mobx状态变量?

import React, { Component } from 'react';
import { BookIcon } from 'react-octicons-svg';
import { observable } from 'mobx';
import { observer } from 'mobx-react';


@observer
class Wallet extends Component {

    static propTypes = {
        name: React.PropTypes.string,
        wallet: React.PropTypes.object.isRequired
    }

   @observable showPassbook = false;
   @observable wallet = Object.assign({}, this.props.wallet);

    render() {

        const walletTitle = this.wallet.title || this.wallet.wallet_name || this.props.name || "no name";

        return (<div>
                <h2>Wallet for {walletTitle}</h2>
                <div className="row">
                    <div className="col-md">
                        <ul className="list-unstyled mt-2">
                            <li><strong>Balance:</strong> {formatNumber(Number(this.wallet.balance.amount), this.wallet.balance.currency)} {this.wallet.balance.currency}</li>
                            <li><strong>State:</strong> {this.wallet.state}</li>
                        </ul>
                    </div>      
                </div>


                <div> 
                    <button className="btn-link" title="Show Passbook" onClick={() => { this.showPassbook = true; }}><BookIcon /> Show Passbook</button>
                   </div>
                {this.showPassbook && (<div>Passbook</div>)}    
            </div>
        )}
};

export default Wallet;

我的Jest单元测试的相关部分是:

it("button to get passbook", function() {
    const wrapper = shallow(<Wallet name="carlos" wallet={walletData}/>)
    console.log("showpassbook", this.showPassbook);
  })

如何在单元测试中访问mobx observable属性? 目前this.showPassbook或wrapper.showPassbook未定义。

1 个答案:

答案 0 :(得分:0)

您可以获取包装器的instance并访问该字段:

it("button to get passbook", function() {
  const wrapper = shallow(<Wallet name="carlos" wallet={walletData}/>)
  console.log("showpassbook", wrapper.instance().showPassbook);
})