Documentation update for testing React Native using jsdom #1873

shawnaxsom · 2018-10-21T01:24:01Z

As discussed in #1375, I was also unable to get React Native testing working with Jest/Enzyme with the current documentation instructions.

I see that a React Native adapter is still being discussed in #1436, but I found that some users have had success with jsdom. I was able to get both react-native-mock-renderer and jsdom working, but react-native-mock-renderer didn't result in very clear snapshots when using Jest snapshot testing.

I have therefore provided some instructions here for how I was able to get React Native testing working with jsdom, and I added some examples from the React Native boilerplate project where it is currently working. I decided to leave in a few helpful tips of other issues I encountered along the way as well.

ljharb · 2018-10-22T23:13:02Z

docs/guides/react-native.md

+
+## Loading an emulated DOM with JSDOM
+
+To use enzyme's `deep` until a React Native adapter exists, an emulated DOM must be loaded.


what is "deep"? Do you mean mount?

Yes mount, good catch, I'll update that.

This has been updated to mount

docs/guides/react-native.md

ljharb · 2018-10-22T23:14:11Z

docs/guides/react-native.md

+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === "undefined")


let's use single quotes here, so the JS would pass eslint

I've updated all the double quotes in the page to single quotes

ljharb · 2018-10-22T23:14:36Z

docs/guides/react-native.md

+const { window } = jsdom;
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)


is Object.getOwnPropertyDescriptors not an option?

This particular function comes from the JSDOM setup documentation: https://airbnb.io/enzyme/docs/guides/jsdom.html

I kept it consistent with that page, copying the setup.js part there but adding some other settings below for the adapter and special handling some console warnings.

I can look into getOwnPropertyDescriptors but probably would want to update it on both pages.

What do you suggest?

Let's update to use it; it's cleaner anyways.

Do we want to support es5?

I updated for now to:

function copyProps(src, target) { Object.defineProperties(target, { ...Object.getOwnPropertyDescriptors(src), ...Object.getOwnPropertyDescriptors(target) }); }

I think that does what we want cleanly, but VSCode is complaining:

[ts] Property 'getOwnPropertyDescriptors' does not exist on type 'ObjectConstructor'. Did you mean 'getOwnPropertyDescriptor'? lib.es5.d.ts(172, 5): 'getOwnPropertyDescriptor' is declared here.

Because Object.getOwnPropertyDescriptors isn't in the es5 spec and unsupported also for IE:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors

Let me know whether we should keep as is to support es5 / IE, or whether the updated code I have above with getOwnPropertyDescriptors is preferred.

gOPDs is polyfillable, so it should work just fine. https://www.npmjs.com/package/object.getownpropertydescriptors

The spread can be transpiled to Object.assign which is also polyfillable https://www.npmjs.com/package/object.assign

so i think that update works great

Sounds good, I updated copyProps here and in two other places in the codebase:

docs/guides/jsdom.md
packages/enzyme-example-mocha/test/.setup.js

jpaas · 2018-10-26T13:55:35Z

Hey @shawnaxsom I'm trying out what you have in the docs, but I'm getting Cannot find module 'StyleSheet' from 'react-native-implementation.js'

shawnaxsom · 2018-10-26T13:59:06Z

@jpaas Is the code public so I can see? Are you importing StyleSheet anywhere? StyleSheet should come from "react-native" instead of "react-native-implementation" generally.

Take a look at the boilerplate code we have here to compare:

https://github.com/ProminentEdge/mobile-boilerplate

jpaas · 2018-10-26T14:15:30Z

@shawnaxsom no sorry its a private repo. I did have a look at your repo. My setup-tests.js is identical. Even though I'm using typescript I wasn't able to get your jest.config.js to work. This is my jest.config.js that works for my non-enzyme tests:

module.exports = {
  preset: "ts-jest",
  setupTestFrameworkScriptFile: "<rootDir>/setupTests.js",
  transform: {
    // Required to work around this problem: https://github.com/facebook/react-native/issues/19859
    "^.+\\.(js|tx|tsx)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
  },
}

shawnaxsom · 2018-10-26T14:20:49Z

@jpaas Have you compared versions in package.json? What version of "react-native" are you on?

shawnaxsom · 2018-10-26T14:23:17Z

@jpaas Also make sure you have this in package.json:

https://stackoverflow.com/questions/47269957/cannot-find-module-from-react-native-implementation-js

"jest": {
    "preset": "react-native"
},

jpaas · 2018-10-26T14:36:15Z

@shawnaxsom I'm using react-native 0.57.4 & react 16.6.0-alpha.8af6728 vs your 0.57.2 and react 16.5.0. I tried rolling back to your version, but no difference.

I tried that jest preset in the package.json but it didn't help, I suspect because my jest.config.js overrides it with the ts-jest preset.

When I try to use your jest.config.js, I get the error Couldn't find preset "module:metro-react-native-babel-preset" relative to my root dir`

shawn-pe · 2018-10-26T14:39:19Z

You might need to install metro-react-native-babel-preset and use our babel.config.js if you want to try our jest.config.js.

…

On Fri, Oct 26, 2018 at 10:36 AM Julian Paas ***@***.***> wrote: @shawnaxsom <https://github.com/shawnaxsom> I'm using react-native 0.57.4 & react 16.6.0-alpha.8af6728 vs your 0.57.2 and react 16.5.0. I tried rolling back to your version, but no difference. I tried that jest preset in the package.json but it didn't help, I suspect because my jest.config.js overrides it with the ts-jest preset. When I try to use your jest.config.js, I get the error Couldn't find preset "module:metro-react-native-babel-preset" relative to my root dir` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1873 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AjcHuroBk9_ioRJgaPf05RC1D4JWXW8lks5uox3ngaJpZM4XyN94> .

jpaas · 2018-10-26T16:32:49Z

@shawnaxsom I am using metro-react-native-babel-preset as my preset in my .babelrc, so I imagine there's something about your jest.config.js that is preventing it from being resolved.

shawnaxsom · 2018-10-26T17:03:56Z

If you have time to set up a public project that replicates the issue I would be happy to take a look, or I might be able to screen share at some point. It's hard to diagnose unfortunately without being able to look at the project.

…

On Fri, Oct 26, 2018 at 12:33 PM Julian Paas ***@***.***> wrote: @shawnaxsom <https://github.com/shawnaxsom> I am using metro-react-native-babel-preset as my preset in my .babelrc, so I imagine there's something about your jest.config.js that is preventing it from being resolved. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1873 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAlGwkh5zQgkoPhjyl2CndvRrnfev9DTks5uozk8gaJpZM4XyN94> .

Documentation update for testing React Native with jsdom

69869e0

This was referenced Oct 21, 2018

Create Adapter for React Native & React 16 #1436

Open

Fix documentation for React Native #1375

Open

Documentation update for The Problem section, Enzyme, benefits callstack/react-native-testing-library#43

Merged

ljharb requested changes Oct 22, 2018

View reviewed changes

ljharb added the docs label Oct 22, 2018

ljharb force-pushed the feature/react-native-documentation branch from fe5b22d to ba7675e Compare October 25, 2018 06:06

ljharb approved these changes Oct 25, 2018

View reviewed changes

ljharb force-pushed the feature/react-native-documentation branch 2 times, most recently from 55ea48f to 69869e0 Compare November 1, 2018 17:33

ljharb merged commit 69869e0 into enzymejs:master Nov 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Documentation update for testing React Native using jsdom #1873

Documentation update for testing React Native using jsdom #1873

shawnaxsom commented Oct 21, 2018

ljharb Oct 22, 2018

shawnaxsom Oct 23, 2018

shawnaxsom Oct 23, 2018

ljharb Oct 22, 2018

shawnaxsom Oct 23, 2018

shawnaxsom Oct 23, 2018

ljharb Oct 22, 2018

shawnaxsom Oct 23, 2018

ljharb Oct 23, 2018

shawnaxsom Oct 23, 2018 •

edited

shawnaxsom Oct 23, 2018

ljharb Oct 23, 2018

shawnaxsom Oct 23, 2018

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

jpaas commented Oct 26, 2018

shawn-pe commented Oct 26, 2018 via email

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018 via email


		## Loading an emulated DOM with JSDOM

		To use enzyme's `deep` until a React Native adapter exists, an emulated DOM must be loaded.

Documentation update for testing React Native using jsdom #1873

Documentation update for testing React Native using jsdom #1873

Conversation

shawnaxsom commented Oct 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shawnaxsom Oct 23, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018

jpaas commented Oct 26, 2018

shawn-pe commented Oct 26, 2018 via email

jpaas commented Oct 26, 2018

shawnaxsom commented Oct 26, 2018 via email

shawnaxsom Oct 23, 2018 •

edited