React-native-web: Jest throws error because `boxShadow`

[sospedra]

What is the current behavior?

When running tests with Jest the following error is thrown:

Invariant Violation: "boxShadow" is not a valid style property

What is the expected behaviour?

My thought is that the alias that we are doing through webpack shall be done for Jest also.

"alias": {
    "react-native": "react-native-web"
}

But maybe I'm completely wrong.

Steps to reproduce

1. Create the very basic example for react-native-web
2. Add boxShadow to any View
3. Setup and run Jest for RN

Environment (include versions)

OS: MacOS Sierra 10.12
Device: MacBook Pro
Browser: Chrome 53
React Native for Web (version): 0.0.45
React (version): 15.3.2

[sospedra]

Beyond this specific issue, would be awesome to have some testing examples @necolas

[MoOx]

If you setup jest for RN, jest will assume that you are using RN (not RNW) for your tests.

The "solution" can be handled in two ways (spoiler: doing both is the best)

• use jest moduleNameMapper options

  "jest": {
    "moduleNameMapper": {
      "react-native": "<rootDir>/node_modules/react-native-web" // <- here is the trick
    },

• include web styles props only in web env

const styles = StyleSheet.create({
  blah: {
    fontSize: 12,
    ...Platform.OS === "web" ? {
      boxShadow: "...",
     } : {}
  }

[necolas]

Thanks @MoOx. We should add that jest info to the docs.

You can also use Platform.select which is helpful when setting different styles for different platforms.

[sospedra]

The moduleNameMapper worked as expected. Problem now is with: https://github.com/facebook/jest/issues/1353
@gaearon says that'd be fixed with React 15.4.0 tho no quick-workaround worked for me.

About the Platform.select I'm already using it but not for testing purposes; which I believe is the idea. Actually, I guess this project is about -- among other things -- providing a solution for cases like box-shadow.

So far, I'd approach this issue with a custom mixin for box-shadow without moduleNameMapper. At least, until 15.4.0 is released. Which shall be soon.

[sospedra]

Turning to another topic: @necolas I can make a PR with some tests added to the examples if you feel like. Very basic, just to showcase the setup.

[MoOx]

@sospedra I am currently using Jest in an RNW project and I am not having the issue you mentionned with the following config

"jest": {
    "notify": true,
    "preprocessorIgnorePatterns": [
      "node_modules/(?!react-(.*-)?native(-.*)?)"
    ],
    "testPathIgnorePatterns": [
      "/fixtures/"
    ],
    "moduleNameMapper": {
      ".*\\.(svg|png|jpg|gif|ttf)$": "<rootDir>/flow/stub/url-loader.js",
      "react-native": "<rootDir>/node_modules/react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json"
    ]
  }

[MoOx]

Relying on RNW for test without moduleNameMapper make no sense since your tests will actually rely on RN. You can't expect from RNW to handle things if you are not actually using it.

[sospedra]

@MoOx I tried your setup and I'm having the same error that I linked:
Invariant Violation: ReactCompositeComponent: injectEnvironment() can only be called once.

I'm planning to don't use RNW while I wait for React 15.4.0 -- which is supposed will fix the issue -- because I didn't found a single workaround that worked.

May can I ask which version of React are you using?

[MoOx]

Oh wait! I have to admit I got this issue when I was using the recommended jest method to run tests (via react-test-renderer?) but I am currently in a migration from AVA and I am still using this weird thing https://github.com/MoOx/jest-ava-api + expect-jsx, so _not the recommended_ method your are trying to use. And I think I got a similar issue while trying enzyme...

I guess using RN until 15.4.0 is out is not so bad after all... We are playing with bleeding edges tools, I guess it's not always rainbow and unicorns :D

[necolas]

OK, there's no specific issue with RNW here.

Platform.select is not just for tests, it's also used to provide valid style props to each platform at runtime.

[sospedra]

My point was that we shouldn't use Platform to pass some tests. But yes. Nothing to do with RNW.