如何用酶的安装方法测试反应成分

Question

I'm trying to use the mount method of the enzyme library to render a custom component but it fails with the error

Invariant Violation: Tester.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

together with some annoying stack traces.

Here is the code snippet

import React from 'react'
import {shallow, mount, render} from 'enzyme'


describe('Dashboard', () => {
    let testComp;
    beforeEach(()=>{
        testComp = mount(  <UserDashboard />  )
    });

    it('should render self without breaking.', () => {
        expect(testComp).not.toBe(null)
    })

})

But I noticed that the problem is not with the UserDashboard component because I still get the same error when I replace it with a simple div element.

testComp = mount(  <div />  )

The shallow and render methods work pretty well but the mount method is being really stubborn.

Please I'm new to testing react components and any help on why this is happening will be greatly appreciated.

Answer 1

This was actually a compatibility issue between my react version ( react v15.6.2 ) and the enzyme adapter I was using ( enzyme-adapter-react-16 ). It was normally supposed to be enzyme-adapter-react-15 .

For anyone having this same problem, make sure to visit this link on how to configure and use enzyme with your version of react. Thanks to @nubinub for the link