Jest: Snapshot Test Import not working with babel-preset

Created on 15 Aug 2016  ·  3Comments  ·  Source: facebook/jest

I'm trying a simple snapshot test. The component I'm testing uses another component from a module. The test fails when trying to import this unmocked module with:

Failure

Using Jest CLI v14.1.0, jasmine2, babel-jest, jest-react-native preset
 FAIL  js/app/SetupView/__tests__/SetupView-test.js (0s)
 Runtime Error
  - SyntaxError: Unexpected reserved word
        at transformAndBuildScript (../../../../../usr/local/lib/node_modules/jest-cli/node_modules/jest-runtime/build/transform.js:306:10)
        at Object.<anonymous> (js/app/SetupView/index.js:12:17)
        at Object.<anonymous> (js/app/SetupView/__tests__/SetupView-test.js:11:12)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 2.419s)

Test

'use strict';
import 'react-native';
import React from 'react';

import SetupView from '../index';

import renderer from 'react-test-renderer';

describe('SetupView', ()=> {
  it('renders correctly', ()=>{
    const tree = renderer.create(
      <SetupView/>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  })
});

SetupView Component

'use strict';

import React from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  Image,
  Animated,
} from 'react-native';

import DataContainer from 'react.datacontainer'; //<---fails here
import DashboardSettings from './DashboardSettings';
.
.
.

package.json

"jest": {
    "globals": {
      "__DEV__": true
    },
    "collectCoverage": false,
    "verbose": true,
    "preset": "jest-react-native",
    "modulePathIgnorePatterns": [
      "node_modules/react-native/node_modules/yeoman-generator",
      "node_modules/react-native/node_modules/fbjs"
    ],
    "unmockedModulePathPatterns": [
      "react.datacontainer",
      "react.data",
      "react.base.theme",
      "react.layout"
    ]
  }

FYI, I have a .babelrc file in my root directory pointing to the react-native preset and the test runs but fails if I comment line 12 out since DataContainer is undefined.

Most helpful comment

Can you try jest --no-cache? If you changed your babelrc before the last invocation, we might not update the cache properly.

If that does not work please create a repo on github that I can npm install and npm test to troubleshoot.

Tip: you don't need unmockedModulePathPatterns when using the react-native-preset because automocking will be disabled anyway.

All 3 comments

Can you try jest --no-cache? If you changed your babelrc before the last invocation, we might not update the cache properly.

If that does not work please create a repo on github that I can npm install and npm test to troubleshoot.

Tip: you don't need unmockedModulePathPatterns when using the react-native-preset because automocking will be disabled anyway.

That didn't work for me. It seems like the issue is with importing the node_module react.datacontainer. After digging in some more, I believe the jest preset is not compiling the node_modules written in es6.

Unfortunately, I can't create a repo at this time. But if it helps further here's what 'react.datacontainer' module looks like. https://github.com/ForceDotComLabs/react.force.datacontainer

You can enable preprocessing for this module via this config option: http://facebook.github.io/jest/docs/tutorial-react-native.html#preprocessorignorepatterns-customization

If you'd like, you can also create an issue on this project's github page to ask them to precompile their dependencies and publish build files on npm.

Was this page helpful?
0 / 5 - 0 ratings