Function.prototype.name sham getter called on non-function

[vasush]

Hi i am new to enzyme and i got this error while testing a functional component.
error :=>

Function.prototype.name sham getter called on non-function
    getName@test/tests.webpack.shared_components.js:20413:84
    call@[native code]
    call@[native code]

Codebase :=>

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import PropTypes from 'prop-types';

const TestCode = ({validations}) =>
 (
  validations && validations.length > 0 ? <div className="valid"></div> : <div className="inValid"></div>
);


TestCode.propTypes = {
  validations: PropTypes.arrayOf(PropTypes.string).isRequired,
};

TestCode.defaultProps = {
  validations: []
};

describe('<TestCode /> ', () => {

  it('valid ...', () => {
    const props = {
      validations: ['1']
    };
    const wrapper = shallow(<TestCode {...props} />);
    expect(wrapper.props().className).to.eql('valid');
  });

});

Environment :=>

• node 8.16.2
• npm 6.4.1

API

• shallow

enzyme | 3.3.0
react | 16.4.1
react-dom | 16.4.1
react-test-renderer |  16.4.1
adapter | enzyme-adapter-react-16 (^1.15.2)
chai | 3.5.0

This functional component test cases faliure occurred once i upgraded my react version from 15.6.1 to 16.4.1 and enzyme version from 2.9.1 to 3.3.0

[ljharb]

@vasush please downgrade until everything works again, and then upgrade enzyme to v3 latest (not 3.3, 3 latest) first, before trying to upgrade react. Then, we can figure out if the issue is due to the enzyme upgrade or the react upgrade :-)

[SergeyAlexeev]

i upgraded my react version from 15.6.1 to 16.4.1 and enzyme version from 2.9.1 to 3.3.0

I have the same issue with functional components.

[ljharb]

Closing for now; happy to reopen if you narrow down if it's the enzyme upgrade, or the react upgrade, that breaks your tests.

[SergeyAlexeev]

@ljharb what about this point ?

I can confirm this behaviour. In my case I use the following code:

const wrapper = shallow(<TableComponent />);
const row = wrapper.find('tr.row');

It does not work and throws the 'Function.prototype.name sham getter called on non-function' error.

If I use only class name as a selector it works as expected:

const wrapper = shallow(<TableComponent />);
const row = wrapper.find('.row');

The 'find' method is not related to React API. Is not it?

[ljharb]

@SergeyAlexeev .find is part of enzyme, yes. Can you share the code for TableComponent so i can reproduce the error?

[ljharb]

@vasush are you running these tests in the browser, or in node? i assume the browser since you're using webpack.

@SergeyAlexeev we have a test for tagname + className: https://github.com/enzymejs/enzyme/blob/master/packages/enzyme-test-suite/test/shared/methods/find.jsx#L86-L94. Where are you running your tests?

For both of you, which webpack version are you using?

[SergeyAlexeev]

Can you share the code for TableComponent so i can reproduce the error?

Unfortunately my project is placed in a private repo and I can't share it.

I'll try to create a minimal sample that demonstrates the issue soon.

are you running these tests in the browser, or in node?

I'm running my tests in node using the following packages:

"webpack": "4.44.1",
"karma": "^5.1.0",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage": "^2.0.3",
"karma-junit-reporter": "^2.0.1",
"karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.5",
"mocha": "^3.5.2",

[ljharb]

Even knowing the contents of just TableComponent would be helpful, but if that's not an option I'll wait for a repro repo.

If you're running your tests in node, why do you need webpack? or are you having these issues in karma (which runs tests in a browser, not in node)

[SergeyAlexeev]

Hi @ljharb ,

I've created a repo that reproduces the issue.

There is the Table component that contains inner HeaderCellContent functional components.

Look at the table-test.js file.

Currently it works fine. But if you uncomment this line the test will fail with error - 'Function.prototype.name sham getter called on non-function'.

Hope it helps to improve enzyme! :)

[SergeyAlexeev]

One more thing. My env:

• Node v12.14.1
• Npm v6.14.1
• Mac OS X 10.15.5

[ljharb]

Thanks, that is perfect. The issue is that the is-callable package (which i also maintain) is reporting this function component as "not a function", because it throws a destructuring error when there's no props object passed. I can't reproduce it in any node versions yet, but I'll see what's different about karma (turns out it's phantomjs).

[ljharb]

v1.2.1 of is-callable has been released; updating to that will fix the problem. Note that if you have a lockfile, you may need to jump through a few extra hoops to get the transitive update.

I was unable to get repeatable phantomjs tests set up; see inspect-js/is-callable#56 for that.

Fixed in inspect-js/is-callable@579179e.

[peppy-shubhi]

I am facing the same issue, but I am not using is-callable in my package.json. But I see it in my package-lock.json as part of other dependencies like es-abstract, enzyme etc. Please help.

[peppy-shubhi]

v1.2.1 of is-callable has been released; updating to that will fix the problem. Note that if you have a lockfile, you may need to jump through a few extra hoops to get the transitive update.

I was unable to get repeatable phantomjs tests set up; see inspect-js/is-callable#56 for that.

Fixed in inspect-js/is-callable@579179e.

Could you please tell what are the steps if we have lock file.

[ljharb]

The simplest is to remove the lockfile and rerun npm install; the least intrusive is probably some form of npm update is-callable.

[peppy-shubhi]

The simplest is to remove the lockfile and rerun npm install; the least intrusive is probably some form of npm update is-callable.

Even after installing in-callable 1.2.1, I get the same error.

[ljharb]

Are you sure npm ls only includes one copy of is-callable? Have you reran any relevant build process?

[peppy-shubhi]

Are you sure npm ls only includes one copy of is-callable? Have you reran any relevant build process?

Yes, I checked t that.

[ljharb]

If you can reproduce the error, a new issue with a repro repo would be most helpful.

[SergeyAlexeev]

Hi @ljharb ,

Sorry for delay, I was a little busy))

I've updated is-callable to v1.2.1 but the error still appears:

npm ls is-callable

As far as I understand, this line from 'is-callable' works wrong.

One more point.

Thanks, that is perfect. The issue is that the is-callable package (which i also maintain) is reporting this function component as "not a function", because it throws a destructuring error when there's no props object passed.

I'm absolutely sure, that my functional component has props.

At the same time, if I update my component like below:

const HeaderCellContent = ({ text } = {} /* add default arg */) => <div className="header-cell">{text}</div>;

The error will go away.

It looks very strange, because in my code HeaderCellComponent always has props and works as expected. But is-callable tries to run functional component with the 'badArrayLike' arg and it does not work. I'm not sure, I should provide an empty object as default props for each functional component in my project.

[ljharb]

@SergeyAlexeev you're 100% right that you should not have to do that, and the bug in is-callable was specifically that it didn't ensure that the exception thrown was the badArrayLike one.

The line you highlighted is wrong, which is why inspect-js/is-callable@579179e was needed to fix it. However, strangely enough, I don't see the actual fix in that commit - so I think I need to include it and publish a v1.2.2 (－‸ლ) I'll do that shortly!

[ljharb]

Reopened; v1.2.1 doesn't actually contain the fix. Will close when v1.2.2 is published, after npm becomes available again.

[ljharb]

is-callable v1.2.2 is released. Please let me know if updating to that doesn't fix this issue.

[SergeyAlexeev]

@ljharb thanks a lot! Now it works like a charm!))