TypeError: The provided value is not of type 'Element' when snapshot testing with React,Storybook and Storyshots addon

Question

I am getting `` error when testing my IndeterminateCheckbox component below:

import { Checkbox } from '@chakra-ui/core';
import React from 'react';

export interface IndeterminateCheckboxProps {
  indeterminate: boolean;
  checked: boolean;
  title: string;
  onChange: () => void;
}

const IndeterminateCheckbox = React.forwardRef(
  (
    { indeterminate, checked, title, onChange }: IndeterminateCheckboxProps,
    forwardedRef: any
  ): JSX.Element => {
    return (
      <Checkbox
        colorScheme="brand.blue"
        isIndeterminate={indeterminate}
        isChecked={checked}
        onChange={onChange}
        name={title}
        sx={{ mt: '4px', borderColor: 'brand.grey.100' }}
      />
    );
  }
);

export default IndeterminateCheckbox;

I am snapshot testing with Storyshots addon with the following story:

/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import IndeterminateCheckbox, {
  IndeterminateCheckboxProps,
} from './IndeterminateCheckbox';

export default {
  title: 'IndeterminateCheckbox',
  component: IndeterminateCheckbox,
  argTypes: {
    indeterminate: {
      control: {
        type: 'boolean',
      },
    },
    checked: {
      control: {
        type: 'boolean',
      },
    },
    title: {
      control: {
        type: 'string',
      },
    },
  },
} as Meta;

const Template: Story<IndeterminateCheckboxProps> = args => (
  <IndeterminateCheckbox {...args} />
);

export const Unchecked = Template.bind({});
Unchecked.args = {
  indeterminate: false,
  title: 'unchecked',
  checked: false,
  onChange: () => null,
};

export const Checked = Template.bind({});
Checked.args = {
  indeterminate: false,
  title: 'checked',
  checked: true,
  onChange: () => null,
};

export const Indeterminate = Template.bind({});
Indeterminate.args = {
  indeterminate: true,
  title: 'indeterminate',
  checked: false,
  onChange: () => null,
};

any ideas what could be causing this?

Answer 1

You have to update the storyshots config to support elements that have refs passed to them:

react-test-renderer doesn't provide refs for rendered components. By default, it returns null when the refs are referenced. In order to mock out elements that rely on refs, you will have to use the createNodeMock option added to React starting with version 15.4.0. https://www.npmjs.com/package/@storybook/addon-storyshots#using-createnodemock-to-mock-refs