Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: Invalid attempt to destructure non-iterable instance React/Jest

I am trying to do a SnapShot verification using Jest for my React App for one of the functional component. Here is the component and test file using Jest

import React, { useState } from 'react';
import useForm from 'react-hook-form';
import { useAppState } from 'Shared/store';
...

const Form = () => {

const {customReducer, dispatch} = useAppState();
const { register, handleSubmit, errors, reset } = useForm({});

//custom form methods

return (
<>
   <Form ...>
     ...
   </Form>
   ....
</>
);
export default Form;

and my test using Jest

import React from 'react';
import TestRenderer from 'react-test-renderer';
import ShallowRenderer from 'react-test-renderer/shallow';
import Form from '../form';

describe('<Form />', () => {
    test('Snapshot', () => {
    const tree = TestRenderer.create(<Form />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

and i was getting below error TypeError: Invalid attempt to destructure non-iterable instance

Tried with Enzyme as well but getting the same error. Spend good time in referring other related questions but couldn't figure out. Thank you.

like image 902
siddhuKantipudi Avatar asked Nov 14 '19 16:11

siddhuKantipudi


1 Answers

Had a similar problem where Storybook threw Invalid attempt to destruct non-iterable instance on a component using hooks (useContext).

The solution was to initiate the context with a default value, createContext([{}, function() {}])

I found the solution here

like image 163
Natan Williams Avatar answered Nov 05 '22 19:11

Natan Williams