Question

在制作连接组件后，您似乎无法在反应组件中测试状态。谁知道为什么？为了说明这一点，我对没有使用redux的反应组件进行了测试，并在连接后立即失败。

// MyComponent.jsx
import React from 'react'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar'
    };
  }

    render() {
    return <div></div>
  }
}

export default MyComponent

这是通过测试：

// MyComponent.test.js
import React from 'react'
import MyComponent from '../src/components/MyComponent'
import { mount } from 'enzyme'

describe('MyComponent', () => {
  describe('interactions', () => {
    let wrapper
    beforeEach(() => {
      wrapper = shallow(<MyComponent />)
    })

    it('foo to equal bar', () => {
      expect(wrapper.state().foo).toEqual('bar')
    })
  })
})

现在我介绍Redux并连接组件：

// MyComponent.jsx

...

export default connect(function (state){
  return {
    currentUser: state.currentUser
  }
})(MyComponent);

这是更新后的测试：

// MyComponent.test.js
import React from 'react'
import MyComponent from '../src/components/MyComponent'
import { mount } from 'enzyme'

import configureStore from 'redux-mock-store'

describe('MyComponent', () => {
  const state = {}
  const mockStore = configureStore()

  describe('interactions', () => {
    let wrapper
    beforeEach(() => {
      wrapper = mount(<MyComponent store={ mockStore(state) } />)
    })

    it('foo to equal bar', () => {
      expect(wrapper.state().foo).toEqual('bar')
    })
  })
})

Answer 1

我建议只导出connect()（默认导出）和实际组件本身。

这样，您可以在组件的连接版本之外单独测试组件。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar'
    };
  }

    render() {
    return <div></div>
  }
}

export MyComponent

export default connect(function (state){
  return {
    currentUser: state.currentUser
  }
})(MyComponent);

然后测试：

import { MyComponent } from '../src/components/MyComponent'
import { mount } from 'enzyme'

describe('MyComponent', () => {
  describe('interactions', () => {
    let wrapper
    beforeEach(() => {
      wrapper = shallow(<MyComponent />)
    })

    it('foo to equal bar', () => {
      expect(wrapper.state().foo).toEqual('bar')
    })
  })
})

Answer 2

那是因为connect()生成了一个管理商店交互过程的包装器组件。在您的第二个代码段中，<MyComponent>现在是由connect()生成的组件，而不是您原始组件。您需要在渲染层次结构中深入挖掘另一级嵌套，以检查实际组件状态的内容。

在jest单元测试中从redux反应组件中获取状态

2 个答案: