Issues using Jest with react-bootstrap

Question

I'm trying to test some React components with Jest.

I can successfully test a) plain JS files and b) React components written in CJSX (Coffeescript and JSX). There was some configuration required using a preprocessor for Jest to process the CJSX files into JS - but that seems to work. At least I can test simple React components written in CJSX. I don't think this problem is specific to compiling CJSX files.

However: when I bring in react-bootstrap there are problems. This is necessary because all of the components I want to test use react-bootstrap.

This occurs equally when I am unmocking react-bootstrap and when I am leaving Jest to automatically mock it. Either way it has to parse the files in its test runner - and this is when the problem occurs.

This is the specific error message:

SyntaxError: path/components/scripts.cjsx: /node_modules/react-bootstrap/lib/index.js: /node_modules/react-bootstrap/lib/utils/bootstrapUtils.js: /node_modules/react-tools/src/vendor/core/warning.js: Unexpected token ...

scripts.cjsx is the file which contains the component I am trying to test - and the file in which I do require 'react-bootstrap'

And the full stacktrace is:

 at Object.exports.runInContext (vm.js:43:16)
        at JSDOMEnvironment.runSourceText (node_modules/jest-cli/src/environments/JSDOMEnvironment.js:40:10)
        at Object.runContentWithLocalBindings (node_modules/jest-cli/src/lib/utils.js:378:17)
        at Loader._execModule (node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:234:11)
        at Loader.requireModule (node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:845:14)
        at Loader.requireModuleOrMock (node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:875:19)
        at Object.<anonymous> (node_modules/react-bootstrap/lib/utils/bootstrapUtils.js:19:16)
        at Object.runContentWithLocalBindings (node_modules/jest-cli/src/lib/utils.js:397:17)
        at Loader._execModule (node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:234:11)
        at Loader.requireModule (node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:845:14)

I didn't resolve this. We switched to using webpack to build the test files using this excellant npm module: npmjs.com/package/jestpack — user911625

Osus Osus · Accepted Answer · 2015-12-18T01:35:13

I modified JSDOMEnvironment.js from jest-cli to print out the module paths that are being loaded. When doing require('warning') in bootstrapUtil.js (along as within other parts of my code), this is what I saw:

********   D:\builds\gauntlet\main\cat\src\main\resources\node_modules\react-tools\src\vendor\core\warning.js

(function(){return function(module, exports, require, __dirname, __filename, global, jest, ____JEST_COVERAGE_DATA____) {/**
 * Copyright 2014-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule warning
 */

"use strict";

var emptyFunction = require('emptyFunction');

/**
 * Similar to invariant but only logs a warning if the condition is not met.
 * This can be used to log issues in development environments in critical
 * paths. Removing the logging code for production environments will keep the
 * same logic and follow the same code paths.
 */

var warning = emptyFunction;

if (__DEV__) {
  warning = function(condition, format, ...args) {
    if (format === undefined) {
      throw new Error(
        '`warning(condition, format, ...args)` requires a warning ' +
        'message argument'
      );
    }

Here you can see where the "..." is coming from. This is being picked up from the deprecated react-tools, which are being pulled down by reactify. This should be picked up either from the warning package. I'm looking for a solution to make jest look for that package.

Sorry I "answered", I wanted to comment, but I just don't have the reputation yet.

Issues using Jest with react-bootstrap

2 Answers