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

Question

下面是我的组件。 mobx 状态只是在组件的主体中，我没有为它创建单独的存储。

我的问题是如何在 jest/enzyme 单元测试中访问那些 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 可观察属性？当前 this.showPassbook 或 wrapper.showPassbook 未定义。

Answer 1

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

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

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

Accessing mobx observable property in React Component in Jest unit test

javascript

reactjs

jestjs

mobx