连接组件的酶 wrapper.instance() 为空

Question

我正在尝试测试一个连接的反应组件，但是一旦包装它，我无法使用 instance() 获取它的实例，它返回 null。对于非连接组件，它确实返回实例，有什么区别？如何获取连接组件的实例？

it('connected component', () => {
  const wrapper = mount(
    <Provider store={store}>
      <BrowserRouter>
        <ConnectedComponent />
      </BrowserRouter>
    </Provider>
  )
  const myComp = wrapper.find(ConnectedComponent)
  expect(myComp).toHaveLength(1) // passes
  console.log(myComp.instance()) //null

})

it('non-connected component', () => {
  const wrapper = mount(
    <Provider store={store}>
      <BrowserRouter>
        <NonConnectedComponent />
      </BrowserRouter>
    </Provider>
  )
  const myComp = wrapper.find(NonConnectedComponent)
  expect(myComp).toHaveLength(1) // passes
  console.log(myComp.instance()) // prints the instancce
})

Answer 1

问题在于，对于连接的组件，您导出的是 Connect 包装器，而不是组件本身。有几个选项可以处理它。

选项 1. 使用 dive()。请注意，这仅在您使用 shallow 渲染时可用，在 mount 上不可用。

const component = shallow(<ConnectedComponent />).dive(); // dive one level into the Connect wrapper
component.instance(); // the instance will be available

选项 2. 在连接之前单独导出组件并使用命名导入来获取它。

// in your component
export class MyComponent extends React.Component {
  ...
}

export default connect()(MyComponent);

// in your tests
import { MyComponent } from './component'; // this will get you non-default export of the component, which is not connected