admin 管理员组

文章数量: 1086864

I am trying to do a SnapShot verification using Jest for my React App for one of the functional ponent. Here is the ponent 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.

I am trying to do a SnapShot verification using Jest for my React App for one of the functional ponent. Here is the ponent 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.

  • javascript
  • reactjs
  • jestjs
  • enzyme
  • destructuring
Share Improve this question edited Nov 14, 2019 at 16:55 skyboyer 23.8k7 gold badges62 silver badges71 bronze badges asked Nov 14, 2019 at 16:30 siddhuKantipudisiddhuKantipudi 3034 silver badges11 bronze badges 2
  • do you mock any of hooks you are using in ponent? – skyboyer Commented Nov 14, 2019 at 16:55
  • Hello, I have couple of hooks. useAppState(which uses internally useContext) and useState. I haven't mocked neither of them – siddhuKantipudi Commented Nov 14, 2019 at 18:41
Add a ment  | 

1 Answer 1

Reset to default 6

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

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

I found the solution here

本文标签： javascriptTypeError Invalid attempt to destructure noniterable instance ReactJestStack Overflow

版权声明：本文标题：javascript - TypeError: Invalid attempt to destructure non-iterable instance ReactJest - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744044303a2523831.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。