Enzyme: IE 11: TypeError: Object doesn't support property or method 'from'

[wimpyprogrammer]

Describe the bug

Enzyme 3.5.0 errors in Internet Explorer 11 with:
TypeError: Object doesn't support property or method 'from'

TypeError: Object doesn't support property or method 'from'
   at _toConsumableArray (eval code:43:169)
   at unique (eval code:73:3)
   at reduceTreesBySelector (eval code:484:3)
   at find (eval code:844:9)
   at Anonymous function (eval code:22:3)

Here's a simple example and the resulting build failures.

This seems to stem from https://github.com/airbnb/enzyme/commit/89b39b6f1c59aa771f4452a27b159f7aa2616e84#diff-ee4c070528cfb6bb4936ac945d73692b.

To Reproduce

Steps to reproduce the behavior:

1. Write an Enzyme 3.5.0 test that calls ShallowWrapper.find().
2. Use Karma to run the test in Internet Explorer 11 without any polyfills.

Expected behavior

ShallowWrapper.find() does not error.

Desktop:

• OS: Windows 10
• Browser: Internet Explorer
• Version: 11.0.0

Additional context

I can't find a list of supported browsers or required polyfills, so apologies if this is expected behavior. Since IE 11 was working in Enzyme 3.4 I'm assuming this is a mistake.

Here's the Enzyme 3.5.0 code published to npm.

function unique(arr) {
  return [].concat(_toConsumableArray(new Set(arr)));
}

_toConsumableArray comes from babel-runtime and contains the usage of Array.from(). Is this a Babel issue instead?

Also according to this ES2015 compatibility table I don't think new Set(arr) will work natively in IE 11.

[ljharb]

enzyme expects that you're using https://npmjs.com/airbnb-browser-shims or the equivalent. It'd be fine to add a note to that effect to the docs.

Regarding the specific breakage, it'd be reasonable to remove that usage of Set if polyfilling is a significant problem for you, but I'd prefer not to.

[wimpyprogrammer]

Thanks for clarifying! Importing airbnb-js-shims/target/es2015 into my Karma environment fixes everything.

I'd love to submit a PR to mention airbnb-browser-shims in the docs but I wouldn't know what to say so I'll have to leave that to someone else.

Thanks for the help and all the great JavaScript tools!

[ghost]

It seems this is a mistake, by using the shim, it defeats the purpose of testing product code on old browser, like IE11. To give some background, that is our setup:

• We have React components built to be shared across applications, not all applications needs to have shim available.
• The component need to pass its own tests on modern browsers and old browsers, like IE11, without shim
• We setup babel to trans-pile the code down to ES5

If we add the browser shim, which means the test can pass by itself, but may break the usage if it doesn't have the shim, which is not expected as the initial contract. And, since enzyme is only for test, but run on the same environment as the test target code, adding shim for enzyme will make the product change which won't work w/o shim to sneak through.

@ljharb If you don't mind, I can send a PR to use the lodash.uniq for the purpose. Let me know.

[ljharb]

@KL-05 that would be a design change for enzyme; currently enzyme requires the shims, and assumes your component will never end up in an environment without them (ie, assumes that your component requires the shims to be present too).

I agree with the difficulty you're describing, but the only solution would be to remove enzyme's reliance on all ES6 shims, which would be a pretty large change. I'm also not interested in using lodash if we can avoid it.

If you'd like to open up a PR that runs enzyme's tests without the shims, theoretically that should identify how many places it would be a problem.