如何用HOC寫出正確的開玩笑測試？

Question

我試圖理解為什么我的開胃菜/酶測試失敗了。 我有一個組件，我使用redux的compose函數，結構如下：

class MyComponent extends Component {
    //code here
}

export default compose(
    connect(mapStateToProps),
)(MyComponent)

在我的開玩笑測試中，我這樣做：

Import { MyComponent } from ‘app/MyComponent’;

describe(‘<MyComponent />’, () => {
    let component;
    beforeEach(() => {
        props = {
            id: ‘23423’     
        }
        component = shallow(<MyComponent {…props} />);
    }


    it(‘Loads correctly’, () => {
        expect(component.state(‘isLoading’)).toEqual(true);
        expect(component.find(‘InnerComponent’).length).toBe(1);
}

但是，我收到的錯誤如“無法讀取未定義的屬性'狀態”。 我知道使用淺渲染並不能給我我需要的確切結構，但我不確定還有什么可以嘗試獲得正確的結構。 我嘗試淺層渲染包裝的組件，然后在其中找到未包裝的組件，如下所示， component = shallow(<MyComponent {...props} />).find('MyComponent').shallow(); ，沒有運氣。 任何其他建議將不勝感激。 `

Answer 1

通常您要測試組件而不是組件與redux的集成：

class MyComponent extends Component {
    //code here
}

export { MyComponent } // export the component
export default compose(
    connect(mapStateToProps),
)(MyComponent)

同樣在測試中，您import { MyComponent } from '...'導入命名導出import { MyComponent } from '...'而不是導入默認值： import MyComponent from '..'

import { MyComponent } from ‘app/MyComponent’;

describe(‘<MyComponent />’, () => {
  let component;
  beforeEach(() => {
    props = {
      id: ‘23423’     
    }
    component = shallow(<MyComponent {…props} />);
  }


  it(‘Loads correctly’, () => {
    expect(component.state(‘isLoading’)).toEqual(true);
    expect(component.find(‘InnerComponent’).length).toBe(1);
  }
}

如果要測試與redux存儲的組件交互，則需要使用<Provider />包裝組件

import { MyComponent } from ‘app/MyComponent’;
import { Provider } from 'react-redux'

    describe(‘<MyComponent />’, () => {
      let component;
      beforeEach(() => {
        props = {
          id: ‘23423’     
        }
        component = shallow(<Provider><MyComponent {…props} /></Provider>);
      }

您一定要閱讀 redux文檔的測試部分