Upgrading from 5.x to 7.x produces different snapshots

[necolas]

• babel-plugin-tester version: 7.0.1
• node version: 10.16.3
• npm (or yarn) version: 1.12.1

Relevant code or config

https://github.com/necolas/react-native-web/blob/master/packages/babel-plugin-react-native-web/src/__tests__/index-test.js

What you did:

Updated babel-plugin-tester from 5 to 7

What happened:

All the snapshots broke because the output is now being compiled to ES5 code

    - const ReactNative = require('react-native-web/dist/index');
    + "use strict";
    +
    + var ReactNative = require("react-native-web/dist/index");

    - const unstable_createElement = require('react-native-web/dist/exports/createElement').default;
    + var unstable_createElement = require("react-native-web/dist/exports/createElement").default;

    - const ColorPropType = require('react-native-web/dist/exports/ColorPropType').default;
    + var ColorPropType = require("react-native-web/dist/exports/ColorPropType").default;

    - const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
    + var StyleSheet = require("react-native-web/dist/exports/StyleSheet").default;

    - const View = require('react-native-web/dist/exports/View').default;
    + var View = require("react-native-web/dist/exports/View").default;

    - const TouchableOpacity = require('react-native-web/dist/exports/TouchableOpacity').default;
    + var TouchableOpacity = require("react-native-web/dist/exports/TouchableOpacity").default;

    - const processColor = require('react-native-web/dist/exports/processColor').default;
    + var processColor = require("react-native-web/dist/exports/processColor").default;

Reproduction repository:

https://github.com/necolas/react-native-web/

Problem description:

I want the snapshots not to change to compiled output

[kentcdodds]

Hi @necolas! 👋

Could you find where this change was introduced and we can determine whether to revert?

[necolas]

The snapshots change in v6.0. I'm using babel-jest@^24.9.0 and jest@^24.9.0

I don't know what the cause is, it could be that my test env config needs adjusting, but I didn't find any clues in the release notes.

[kentcdodds]

Well, we moved from babel 6 to babel 7 in that version bump, so it could be just about anything. This was the commit: a174a76

We didn't really change much in there. Just what needed to be changed to support babel 7, so I'm guessing this is just a result of the babel 7 upgrade.

[necolas]

Looks like your unit test fixtures are just console.log or use strict and not representative JS code, so you might not have had any visibility into output changes. I can't really stay on v5.0 either because it returns in the describe block and I get warnings in my test results about that.

I have no idea how babel, babel-jest, and babel-plugin-tester work together. Every time I update one of them something breaks :(

[kentcdodds]

Yeah, it's a big ball of complexity :-(

Unfortunately I don't have the bandwidth to look into this. I'd say just update the snapshots and hope nothing changes in the future. This module is pretty stable at this point. Sorry I can't be any more help.

[necolas]

OK, well I'm not going to do that

[necolas]

Not sure why you closed this issue.

Perhaps @hzoo understands why switching to @babel/core produces this change?

[kentcdodds]

Sorry, I was under the impression that the only concern was a few quotes and use strict additions that really had no baring on the actual functionality of the code. From what it appears, you just don't want to update snapshots and I'm not sure why it's that big of a deal. Please help me understand why this is significant.

[necolas]

What i mentioned about use strict was what i saw in this repos unit tests. What I'm seeing is in the OP. Code is now being compiled down to ES5 in the snapshots

[kentcdodds]

Ok, so the problem is that it appears some babel plugins are being included in the compilation that weren't being included before. That's what it looks like to me.

[kentcdodds]

This is definitely a bug and should be fixed. I don't have the bandwidth right now, but I would like to see this looked at eventually.

[kwelch]

I had also ran into this issue in the past, but found it to only be 'use strict' in which case, I reluctantly updated the snapshots.

If someone looking to take this on need a simple reproduction repo.

Here are the updated snapshots:
https://github.com/kwelch/babel-plugin-captains-log/blob/master/src/__snapshots__/index.spec.js.snap

[kentcdodds]

I figured out the problem. Babel is looking for your babel.config.js file and applying all the plugins in there as well. You can set babelOptions: {configFile: false} or just wait a few minutes and I'll have that as the default.

Thanks for your patience.

[kentcdodds]

Kinda forgot to tag this issue as closed in the commit, but here it is: 7b97a6f

Hopefully that fixes your issues @necolas!

[necolas]

Awesome, thank you!

[necolas]

This did the trick, although babel is changing the single quotes to escaped double quotes: https://github.com/necolas/react-native-web/pull/1485/files. Any ideas?

[kentcdodds]

Oh, yeah, I think that we can't help babel changing it to double quotes, but there's the formatResult option that would allow you to format the result with prettier. I could even make a default formatter that would format it with prettier if you have a prettier config in the project.

Actually, what would probably be better is if we use recast as our printer so the output resembles the input as closely as possible WRT formatting. I'll explore that.

[kentcdodds]

Alright, after spending some time researching this, there's apparently no way for us to get babel to not change single quotes to double quotes (even with recast). However, with recast we preserve whitespace better which is nice. I'm not certain it's worth the nuances of parser plugin issues etc.

So recast is out. But I think that I will add the feature to expose a formatResult function which you can opt-into using to format your output with prettier. You'd use it like:

import pluginTester, {formatResultWithPrettier} from 'babel-plugin-tester'
import yourPlugin from '../your-plugin'

pluginTester({
  plugin: yourPlugin,
  formatResult: formatResultWithPrettier,
  tests: {/* your tests */},
})

This way it would be non-breaking, un-opinionated, and easy to use.

[necolas]

This fixes it! necolas/react-native-web#1485 (comment)

[kentcdodds]

I think you'll like the enhancements I have coming. It'll be a major version bump, but an easy upgrade. Should be out really soon.

[kentcdodds]

v8 has been released :)