Update Homepage

[hramos]

Let's tighten up the landing page at facebook.github.io/jest a bit.

• Move "React Testing", "React Native Testing", and "API Reference" out of the red hero banner at the top. This leaves us with a single "Get Started" call-to-action.

• The "Get Started" CTA links to a section further down in the homepage. Let's add the "React Testing", "React Native Testing", and "API Reference" CTAs here.

• Update "Getting Started" introduction. Reader should be be presented the option to "Get Started with React Native Testing", or "Get Started with React Testing", etc (see previous checkbox). Or, user can proceed through "Getting Started" section using the embedded repl.it.

• Update the three featured items at the top. New ones are: "Easy and Familiar", "Performance", "Snapshot Testing". Update the accompanying text as needed.

• Replace snapshot testing section with a link to the new Snapshot Testing guide and some introductory text.

• Replace babel section with a link to the new Babel configuration guide and some introductory text.

[tijs]

@hramos where can i currently find the 'new' guides for react-native and babel setup? i've spent rather too long getting jest to work for a react-native build as the docs (as linked from the homepage) do not seem to reflect the current situation for an updated (0.39) React Native project.

[thymikee]

@tijs checkout the new-docs branch.

[tijs]

@thymikee thanks! the react-native setup outlined there seems the same as the current docs though? https://github.com/facebook/jest/blob/new-docs/docs/TutorialReactNative.md

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

I'm using the preset there as outlined in the docs but i can only get my tests to run when i add a custom .babelrc which adds some presets. which in turn breaks your build so i now have to resort to different presets for different babel presets..

{
	"env": {
	    "development": {
	      	"presets": [
			    "react-native",
		  	]
	    },
	    "test": {
	      	"presets": [
			    "react-native",
			    "es2015-node",
			    "fbjs"
			]
	    }
	}
}

Quite likely this is not the recommended setup. This fixes my iOS builds but i still have trouble with my android builds with this setup. Either way it seems like the docs do not cover the full setup?

[thymikee]

Have you tried setting transformIgnorePatterns?

The transformIgnorePatterns option can be used to whitelist or blacklist files from being transformed with babel. Many react-native npm modules unfortunately don't pre-compile their source code before publishing.

By default the jest-react-native preset only processes the project's own source files and react-native. If you have npm dependencies that have to be transformed you can customize this configuration option by whitelisting modules other than react-native:

[tijs]

not sure what i should be ignoring? on android when i setup jest as above the first error i get as the app bundle loads is error unknown named module: 'object-assign'. Which seems to indicate that react-native failed to transform the js code. strangely this is not and issue for iOS which works fine as long as i run my tests with the alternate BABEL_ENV presets. did not mean to hijack this issue btw maybe i should open a new issue for this..

[tijs]

@thymikee just to be sure; this example is also outdated right? the jest-react-native preset used there should now be just react-native and it's no longer needed to install the jest-react-native package as far as i can tell? https://github.com/facebook/jest/blob/master/examples/react-native/package.json

[thymikee]

Yes, there's a note on the beginning about deprecating jest-react-native but it's present throughout the tutorial. @hramos we need to address that.

To ignoring: by default whole node_modules directory is not transformed for react-native (ignored). In the docs, there's a regular expression which tells to ignore all paths that are inside node_modules but react-native or my-project or react-native-button:

node_modules/(?!react-native|my-project|react-native-button)

[tijs]

Yeah would cause less confusion especially as the tutorials call it the NEW jest which it turns out is already the old jest again :)

for ignoring: isn't ignoring react-native (so it does get transformed) exactly what the preset already does? If i do not add my own ignore rules the react-native code transforms fine (as the preset takes care of that). But it's not enough to test my react-native project as i get the following error then:

 FAIL  src/containers/__tests__/Transaction-test.js
  ● Test suite failed to run

    Invariant Violation: Native module cannot be null.
      
      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
      at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
      at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:191:16)
      at Object.get Linking [as Linking] (node_modules/react-native/Libraries/react-native/react-native.js:91:22)
      at Object.<anonymous> (node_modules/react-native-experimental-navigation/NavigationRootContainer.js:15:36)

This then is solved by adding the fbjs preset too (as in the package.json found in the react-native project). My tests now run and my bundle loads correctly for iOS.

For android i get the error about object-assign not being found though.

Even if that is unrelated it seems the default react-native config for jest should mention the fbjs preset too as that seems to be needed for any RN project not just mine?

[thymikee]

Sadly I don't have that knowledge about react-native. But looking at their package.json it seems like they ignore lots of fbjs files, so I guess it is OK if Babel preset fixes this for you.

If you have any ideas how to improve this tutorial, feel free to send a PR against new-docs branch.

[tijs]

@thymikee ok will do. As soon as i figure out a repeatable setup i'll make a PR.

[hramos]

@tijs #2272 is up for grabs if you'd like to take a stab at this.

[tijs]

@thymikee @hramos when creating my own simple mock as outlined in a comment to another issues here: #2208 (comment) the default jest setup for react-native with just the react-native preset configured does work correctly. I can now make builds again and run my tests. So i could add some troubleshooting tips to the current documentation for react-native and update the example. But eventually it's up to the react-native maintainers to make sure their code works correctly with jest out of the box i guess which seems to something they are aware off.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.