Skip to content

Support ES5 (again) #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jjmac opened this issue Feb 13, 2019 · 4 comments
Closed

Support ES5 (again) #212

jjmac opened this issue Feb 13, 2019 · 4 comments
Labels
packaging Build, compilation, or distribution problem

Comments

@jjmac
Copy link

jjmac commented Feb 13, 2019

  • dom-testing-libraryversion: 3.16.6
  • react-testing-libraryversion: 5.8.0
  • react version: 16.8.1
  • node version: 10.15.1
  • npm (or yarn) version: 6.4.1
  • @storybook/reactversion: 4.1.11
  • storybook-addon-specificationsversion: 2.1.2

What you did / Problem description:

Trying to run tests in IE11 results in a syntax error because the dist targets ES6.

The break occurs at the first arrow function in dom-testing-library/events.js line 310:

Object.keys(eventMap).forEach(key => { ...

Test are being run in storybook using storybook-addon-specifications. Works great in Chrome but breaks in IE11 due to ES6 syntax in distribution

Suggested solution:

Target ES5 or provide an ES5 build?
This was fixed previously in #160 but that seems to be due to an external dependency.

The project is setup using create-react-app and is using craco for some overrides - is there a way to re-target specific dependencies to ES5?

@jjmac
Copy link
Author

jjmac commented Feb 13, 2019

Ugh. So I think I found the solution - I need to import the specific UMD file in react-testing-library to pick-up the ES5 distro:

import {
    cleanup,
    render
} from "react-testing-library/dist/react-testing-library.umd";

@alexkrolick alexkrolick added the packaging Build, compilation, or distribution problem label Feb 15, 2019
@alexkrolick
Copy link
Collaborator

Seems somewhat related to #216 - is the build step targeting node: 'current' or something instead of a browser target? Seems like we should be able to:

  • map each dist file to a specific target
  • guarantee at least the UMD bundle is IE11-compatible
  • document how to consume each bundle

@jjmac
Copy link
Author

jjmac commented Feb 18, 2019

the build is targeting ES5, it's just that node modules aren't transpiled. Importing from "react-testing-library" packages ES6 code which is fine in the node cli and modern browsers but throws in IE11.

The UMD bundle is IE11 compatible, I think maybe this is just a documentation issue. It doesn't seem that the use case for running tests in IE11 is a common one.

@kentcdodds
Copy link
Member

It doesn't seem that the use case for running tests in IE11 is a common one.

Yes, this is true.

I think we're going to go with requiring people to use the UMD if they need old browser support. Maybe we could add a note to the docs?

What do you all think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packaging Build, compilation, or distribution problem
Projects
None yet
Development

No branches or pull requests

3 participants