CODEWITHSUNDEEP
reactjsjestjsenzyme
Kuldeep Bhimte
Kuldeep Bhimte

Reputation: 959

Stateless component returns `null` for shallow snapshot testings

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`;

Upvotes: 0

Views: 357

Answers (2)

Kuldeep Bhimte
Kuldeep Bhimte

Reputation: 959

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

Upvotes: 1

AlexZvl
AlexZvl

Reputation: 2302

import StatelessComponent like this, because its not a default export

import { StatelessComponent } from 'components/elements/StatelessComponent';

Upvotes: 2

Related Questions