使用酶的反應測試類型錯誤：無法讀取未定義的屬性'狀態'

Question

我正嘗試使用酶對組件進行單元測試淺顯示。試圖測試組件的狀態activeTab，並拋出TypeError: Cannot read property state。我的組件Accordion。 Accordion組件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

測試應如何驗證組件的作品，但不是「如何改變的狀態」。您需要將新的道具放入組件並獲得結果，並且預期結果。

我測試過我的部件與快照

這是我的當前項目的一個例子

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

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

Answer 2

這可能是這個範圍界定問題。使用React中的事件處理程序時，必須將構造函數中的事件處理程序綁定到「this」。下面是來自陣營的docs關於它的一些信息：

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without() after it, such as onClick={this.handleClick}, you should bind that method.

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

}