使用酶进行反应测试TypeError：无法读取未定义的属性“state”

Question

我正在尝试使用酶浅渲染对组件进行单元测试。 尝试测试组件的状态activeTab并抛出TypeError: Cannot read property state 。 我的组件手风琴。 手风琴组件jsx代码

 class Accordion extends Component {
    constructor(props) {
        super(props)
        this.state = {
            activeTab: 0
        }
    }

    static defaultProps = {
        tabs: [{title: 'Status'}, {title: 'Movement'}]
    }

    render() {
        const { tabs } = this.props
            , { activeTab } = this.state
        return (
            <div className={`accordion`}>
                {tabs.map((t, i) => {
                    const activeClass = activeTab === i ? `accordion--tab__active` : ''
                    return(
                        <section key={i} className={`accordion--tab ${activeClass}`}>
                            <header className={`accordion--header`}>
                                <h4 className={`accordion--title`}>
                                    <button onClick={() => {this._selectAccordion(i)}}>{t.title}</button>
                                </h4>
                            </header>
                            <div className="accordion--content">
                                {t.title}
                                Content
                            </div>
                        </section>
                    )
                })}
            </div>
        )
    }
    _selectAccordion = activeTab => {this.setState({activeTab})}
}

export default Accordion

和Accordion.react.test.js

import { shallow } from 'enzyme'
import Accordion from './components/Accordion'

test('Accordion component', () => {
    const component = shallow(<Accordion name={`Main`}/>)
    expect(component.state('activeTab')).equals(0)
})

Answer 1

这可能是一个范围问题。 使用React中的事件处理程序，您必须将构造函数中的事件处理程序绑定到“this”。 以下是React关于它的文档的一些信息：

在JSX回调中你必须要小心这个含义。 在JavaScript中，默认情况下不会绑定类方法。 如果您忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，这将是未定义的。

这不是特定于React的行为; 它是JavaScript中函数如何工作的一部分。 通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应该绑定该方法。

class Accordion extends Component {
    constructor(props) {
        super(props)
        this.state = {
            activeTab: 0
        }

        // This binding is necessary to make `this` work in the callback
        this._selectAccordion = this._selectAccordion.bind(this);
    }

    static defaultProps = {
        tabs: [{title: 'Status'}, {title: 'Movement'}]
    }

        _selectAccordion(activeTab){
            this.setState({activeTab : activeTab})
        }

    render() {
        const { tabs } = this.props,
        { activeTab } = this.state
        return (
            <div className={`accordion`}>
                {tabs.map((t, i) => {
                    const activeClass = activeTab === i ? `accordion--tab__active` : ''
                    return(
                        <section key={i} className={`accordion--tab ${activeClass}`}>
                            <header className={`accordion--header`}>
                                <h4 className={`accordion--title`}>
                                    <button onClick={() => {this._selectAccordion(i)}}>{t.title}</button>
                                </h4>
                            </header>
                            <div className="accordion--content">
                                {t.title}
                                Content
                            </div>
                        </section>
                    )
                })}
            </div>
        )
    }

}

Answer 2

您的测试应该验证组件的工作方式，而不是“如何更改状态”。 您需要将新道具添加到组件中并获得结果，并且结果是预期的。

我用快照测试了我的组件

这是我当前项目的一个例子

describe('<Component />', () => {
  it('Page rendered', () => {
    const rendered = renderComponent({
      ...testProps,
      loadDataList,
      loading: true,
    });

    expect(rendered).toMatchSnapshot();
  });
});