ReactWrapper can only wrap valid elements (material-ui - enzyme)

Question

I'm writing a test for a component to test one of its functions, but I am getting an error: ShallowWrapper can only wrap valid elements

The component file is as follows - TextInput.js:

  /* eslint-disable react/require-default-props */
import React from 'react'
import PropTypes from 'prop-types'
import { InputLabel, TextField } from '@material-ui/core'

const TextInput = ({
  name, label, onChange, placeholder, value, error, optional = false, isDisable = false, t,
}) => (
  <>
    {label ? (
      <InputLabel htmlFor={name} className="default-style_label">
        {label}
        {' '}
        {optional && <span className="optional">{`(${t('application.optional')})`}</span>}
      </InputLabel>
    ) : ''}
    <TextField
      type="text"
      name={name}
      placeholder={placeholder}
      value={value}
      // isRequired={isRequired}
      disabled={isDisable}
      onChange={onChange}
      error={error && true}
      helperText={error}
      variant="outlined"
      className="default-style_input"
    />
  </>
)

TextInput.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  error: PropTypes.string,
  optional: PropTypes.bool,
  isDisable: PropTypes.bool,
  t: PropTypes.func,
}

export default TextInput

The test file

   /* eslint-disable no-undef */
import React from 'react'
import { shallow, mount } from 'enzyme'
import TextInput from '../TextInput'

function createTestProps(props) {
  return {
    // common props
    name: 'test',
    label: 'foo',
    value: 'bar',
    onChange: jest.fn(),
    // allow to override common props
    ...props,
  }
}

describe('rendering', () => {
  describe('<TextInput>', () => {
    let wrapper
    let instance
    beforeEach(() => {
      const props = createTestProps()
      wrapper = mount(shallow(<TextInput {...props} />)).get(0)
      instance = wrapper.instance()
    })

    afterEach(() => {
      jest.clearAllMocks()
    })

    it('should be rendered', () => {
      const content = wrapper.find('input').at(1)
      console.debug(content.debug())
      console.log(instance)
      expect(content.value).toBe('bar')
    })
  })
})

The problem is that my tests fail when remove mount from

wrapper = mount(shallow(<TextInput {...props} />)).get(0)

with a Compared values have no visual difference Any ideas why this is happening would be much appreciated!

score 1 · Answer 1 · answered Sep 13 '20 at 15:55

You should use either mount or shallow to render your component based on your use case.

use mount if you want to render your component where all children would be rendered to the last leaf node.
use shallow if you need a level deep rendering of your component.

Note: in most cases, you should use shallow rendering as mount takes a long time.

score 0 · Answer 2 · answered Sep 13 '20 at 13:00

0

You should use shallow or mount, not both of them.

wrapper = mount(<TextInput {...props} />);

const content = wrapper.find('input');
expect(content.value).toBe('bar');

answered Sep 13 '20 at 13:00

Sergej Klackovskis

453
2
5

score 0 · Accepted Answer · answered Sep 14 '20 at 06:55

It's something different when you're using @material-ui.

You've to use @material-ui's Built-in API(s). Such as createMount, createShallow, createRender in order to use enzyme's shallow, mount & render.

These APIs are built on top of enzyme, so you can't use enzyme directly for testing @material-ui.

Here's my test file

   /* eslint-disable no-undef */
import React from 'react'
import { createMount } from '@material-ui/core/test-utils'
import TextField from '@material-ui/core/TextField'
import TextInput from '../TextInput'

function createTestProps(props) {
  return {
    // common props
    name: 'test',
    label: 'foo',
    value: 'bar',
    onChange: jest.fn(),
    // allow to override common props
    ...props,
  }
}

describe('rendering', () => {
  describe('<TextInput>', () => {
    let mount
    let props
    beforeEach(() => {
      mount = createMount()
      props = createTestProps()
    })

    afterEach(() => {
      mount.cleanUp()
    })

    it('renders a <TextField/> component with expected props', () => {
      const wrapper = mount(<TextInput {...props} />)
      expect(wrapper.props().name).toEqual('test')
      expect(wrapper.props().onChange).toBeDefined()
    })

    it('should trigger onChange on <TextField/> on key press', () => {
      const wrapper = mount(<TextInput {...props} />)
      wrapper.find('input').simulate('change')
      expect(props.onChange).toHaveBeenCalled()
    })
  })
})

I found the solution here Material UI + Enzyme testing component

ReactWrapper can only wrap valid elements (material-ui - enzyme)

3 Answers3