Ad

Stateless Component Returns `null` For Shallow Snapshot Testings

- 1 answer

I have a stateless component.

I am matching the snapshot for unit tests.

But it returns null

Spec

import React from 'react';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import StatelessComponent from 'components/elements/StatelessComponent';


describe('<StatelessComponent />', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<StatelessComponent />);
  });

  it ('should render with default props', () => {
    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});

Component

export const StatelessComponent = () => (
  <div className={styles['container']}>
    <div className={styles['description']}>
      <FormattedMessage {...emailErrorInfo} />
    </div>
  </div>
);

Snapshot

exports[`<StatelessComponent /> should render with default props 1`] = `null`;

Ad

Answer

Exporting the Stateless component as a default solved the issue.

const StatelessComponent = () => (
  <div className={styles['container']}>
    <div className={styles['description']}>
      <FormattedMessage {...emailErrorInfo} />
    </div>
  </div>
);

export default StatelessComponent

Ad
source: stackoverflow.com
Ad