Using enzyme with react-rails (asset pipeline)

[ryanwood]

This is more of an inquiry. We have a fairly large Rails application and are transitioning much of the front end work to React. This means that we are using the Rails asset pipeline rather than a module system. :(

I really like the API of enzyme and would love to find a way to use it within my front end testing suite. I'm using Teaspoon with Jasmine underneath. I'm wondering if there is any way to utilize enzyme in a non-module (globals) environment without access to require?

Any help is appreciated. Thanks.

[lelandrichardson]

@ryanwood we had discussed having a separate UMD build that would end up in something like /dist/enzyme.js and /dist/enzyme.min.js, but never got around to it. If you would like to PR something that does this, we will likely accept it.

[ljharb]

I would prefer to not include a UMD at all - it's legacy baggage that's not needed.

@ryanwood - can you not run enzyme through browserify --standalone and stick that in a vendor directory?

Most npm modules don't have a UMD build, so you'll need to integrate some kind of module system into your Rails app.

[lelandrichardson]

@ljharb didn't we have a whole conversation about this last time? I think if we provide a UMD build (one that's not normally required), that's the best of both worlds.

[lelandrichardson]

for reference: https://github.com/airbnb/enzyme/pull/90

[ljharb]

You're right, we did, I'd forgotten.

As we discussed there, it certainly can be included, but I still don't think it adds any value. Enabling people to continue using legacy JS module systems (or none at all) isn't doing anyone any favors.

[BernardDoherty]

Hi all. I am having the same issue as Ryan. We have to continue to use the Rails asset pipeline as we transition parts of our app to a React. Any chance of adding the /dist file to the project or provide some info on how to use browserify --standalone to create stand alone file? Thanks!

[jeffmicklos]

Same boat here, React + Rails. Would love a UMD package with a global exposed!

Though, what @ljharb said kind of bums me out:

Enabling people to continue using legacy JS module systems (or none at all) isn't doing anyone any favors.

By definition, it is doing a favor to those people using legacy JS module systems; this thread proves that is absolutely a segment of the world. I hear your opinion on not wanting to propagate and enable such heinous development environments but some of us just don't really have the choice right now and it kind of sucks to hinder us from make progress forward with the rad library you have built. ¯\_(ツ)_/¯

[danini-the-panini]

The project I am currently working on does not yet allow for very fancy JS modules to be included in the client-side tests. We would like to move towards a position where we do things right (es6 modules and all that), but it's not realistic to completely rebuild the infrastructure. With that in mind, I would like to be able to use enzyme to test my React components now, rather than waiting until the entire infrastructure has been rebuilt using webpack instead of good-old-concat-and-minify.

[colinrobertbrooks]

Wanted to inquire and see if anyone has gone any further down the road of react-rails + jasmine-rails + enzyme in some capacity? I'm using the first two and am interested in using their assertions.

[ljharb]

We've recently open sourced https://github.com/airbnb/hypernova and https://github.com/airbnb/hypernova-ruby, which is what we use at Airbnb with our Rails app, if that helps.

[colinrobertbrooks]

@ljharb, not quite. Like @ryanwood, I'm looking to pipe Enzyme into the Rails asset pipeline to be used in conjunction with Jasmine, TestUtils, etc.

[tedbreen]

We just started building front end components for our Rails app with React. We are using Jasmine to run the tests. Just to get started with testing, I bundled the enzyme files with browserify and placed it in the spec/javascripts/helpers folder:

browserify node_modules/enzyme/src/index.js --external 'react/addons' --external 'react/lib/ExecutionEnvironment' --external 'react/lib/ReactContext' --standalone enzyme -t [ babelify --presets [ es2015 react ] ] > ~/MyApp/spec/javascripts/helpers/enzyme.js

Upside:

• It works!

Downsides:

• Requires oversight to manually update
• The bundled file is 1.9MB (at least it's not being served in production)
• The bundled file is 933kB after minifying it with uglify

[ljharb]

You can add that as a postinstall script in your package.json so that you don't need to manually rerun the command.

[tedbreen]

You can add that as a postinstall script in your package.json so that you don't need to manually rerun the command.

By manually update, I meant keeping up to date with the latest releases of enzyme. We currently do not have a front-end package manager in our app that utilizes npm modules. Hopefully that makes sense.

[ljharb]

Developers can (and should) still use npm install locally, and then commit the browserify output.

[drakmail]

I make an experimental fork which allows to use the enzyme with jasmine-rails:

https://github.com/drakmail/enzyme/pull/1/files

Base idea is to use webpack. After building enzyme with webpack I could just put it into my jasmine helpers directory and use in our specs like this:

let { shallow } = enzyme

describe('Test Spec', () => {
  it('does something', () => {
    const wrapper = shallow(<Preloader />)
    expect(wrapper.find('.preloader').length).toBe(1)
  })
})

[jdpopkin]

I couldn't get @tedbreen's command to work with my web app. My web app is complicated, but I see the same errors when running against a slightly-modified [0] clone of https://github.com/lelandrichardson/enzyme-example-karma.

When I run the exact command (browserify node_modules/enzyme/src/index.js --external 'react/addons' --external 'react/lib/ExecutionEnvironment' --external 'react/lib/ReactContext' --standalone enzyme -t [ babelify --presets [ es2015 react ] ] > dist.js), I get this error:

Error: Cannot find module './ReactWrapper' from ~/enzyme-example-karma/node_modules/enzyme/src

Since ReactWrapper is in a .jsx file, I hoped that telling babelify to examine .jsx files would help:

browserify node_modules/enzyme/src/index.js --external 'react/addons' --external 'react/lib/ExecutionEnvironment' --external 'react/lib/ReactContext' --standalone enzyme -t [ babelify --presets [ es2015 react ] --extensions [ ".jsx" ] ] > dist.js

This also fails, but with a different error:

~/enzyme-example-karma/node_modules/enzyme/src/index.js:1
import ReactWrapper from './ReactWrapper';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Google suggests there are several configuration problems that can cause that error message. Does anyone have any advice on what to try next?

/dist/enzyme.js would also solve my problem.

[0] I ran npm install --save-dev babel-preset-es2015 babel-preset-react.

[ljharb]

You'd want to browserify the compiled enzyme files - which aren't in src, but in build

[trusktr]

Here's a working example: https://github.com/airbnb/enzyme/pull/863