Testing React component with Enzyme Jest finding HTML element

Question

I have a component called Typography that takes a variant prop and renders an element accordingly.

Typography.js

Omitting a lot for brevity

import { StyledH1, ... } from './Typography.styles';

const variantMapping = {h1: StyledH1, ...};

const Typography = ({ children, ...props }) => {
  const Component = variantMapping[props.variant] ? variantMapping[props.variant] : 'span';

  return <Component {...props}>{children}</Component>;
};

So I've tried numerous ways to get a working test. Right now I'm trying to pass variant="h1", get back the following markup <h1 class="..styled component what nots...">...</h1> and verify an <h1> renders

Typography.spec.js

import { mount } from 'enzyme';
import Typography from '.';

describe('<Typography />', () => {
  it('renders H1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper;
    console.log(elem.debug());
    expect(wrapper.find('h1')).toEqual(true);
  });
});

So running the debugger I get back

console.log components/Typography/Typography.spec.js:9
    <Typography variant="h1" bold={false} transform={{...}} small={false}>
      <Typographystyles__StyledH1 variant="h1" bold={false} transform={{...}} small={false}>
        <StyledComponent variant="h1" bold={false} transform={{...}} small={false} forwardedComponent={{...}} forwardedRef={{...}}>
          <h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />
        </StyledComponent>
      </Typographystyles__StyledH1>
    </Typography>

So I changed up the element variable to find the h1 element const elem = wrapper.find('h1');

And debugger returns

console.log components/Typography/Typography.spec.js:9
<h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />

I'm not sure if this is the right approach, just a matter of trying to get at least 1 reasonably passing test.

At this point every expect statement I write comes back with an error or failure

• expect(elem).to.have.lengthOf(1); TypeError: Cannot read property 'have' of undefined
• expect(elem.contains('h1')).to.equal(true); TypeError: Cannot read property 'equal' of undefined
• expect(elem.contains('h1')).toEqual(true); expect(received).toEqual(expected) // deep equality

Have tried a few more options and nothing is working out. Any help would be greatly appreciated.

Answer 1

So it looks like my assertions, using Enzyme, on expect are not setup. Upon reading the Enzyme docs further my setup is only using the Adapter allowing for easier rendering/mounting of components. I do not have the ability to use the Enzyme assertions from the docs because they are not installed. Rather to answer this particular problem I have to use the Jest assertions.

describe('<Typography />', () => {
  it('renders h1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper.find('h1');
    expect(elem.length).toBe(1);
  });
});

https://jestjs.io/docs/en/expect

Answer 2

Enzyme full dom mounting:

.find(selector) => ReactWrapper returns a wrapper, not a boolean

it('renders H1', () => {
  const wrapper = mount(<Typography variant="h1" />);
  const elem = wrapper;
  console.log(elem.debug());
  expect(elem.find('h1')).to.have.length(1);
});

.contains(nodeOrNodes) => boolean - Here's a link to the common gotchas, notably that it expects a react element, not a html element or CSS selector