我正在尝试测试连接的React组件,但是一旦包装了它,我就无法使用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
})
最佳答案
问题在于,对于连接的组件,您将导出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。在连接组件之前分别导出组件,并使用命名的import来获取它。
// 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
关于reactjs - 对于连接的组件, enzyme wrapper.instance()为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51172450/