Jest React Example

Question

I am trying to run the React Example from the Jest React tutorial but I am receiving errors

λ npm test                                          

> ...                           
> jest                                              

Found 1 matching tests...                           
 FAIL  __tests__\CheckboxWithLabel-test.js (0.551s) 
npm ERR! Test failed.  See above for more details.  
npm ERR! not ok code 0   

I have pretty much copied the code directly from the example. The package.json is as follows:

{
  "dependencies": {
    "react": "*",
    "react-tools": "*"
  },
  "scripts":{
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/preprocessor.js",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react"
    ]
  },
  "devDependencies": {
    "jest-cli": "~0.1.17"
  }
}

Any thoughts on what I can do to resolve these errors and run the example test successfully? It's very possible I'm missing an important detail (or details) but not entirely sure what. Oh and for what it's worth, I'm running this on Windows if that impacts this. I would really like to get some tests on my react components (was having some trouble there too so started with the basic examples) -- any help would be appreciated :)

Answer 1

<rootDir> should be replaced with the actual path. It looks like you don't have a subdirectory you want to start from, whereas in some cases you might only want to run tests in a src/ path so your package.json would look more like this:

{
  ...
  "jest": {
    "rootDir": "src",
    "scriptPreprocessor": "../jest/preprocessor.js" // Note: relative to src
  }
  ...
}

Answer 2

To anybody who ends up here on a search about this, @ron's github issue was ultimately resolved, and the conclusion was that unmockedModulePathPatterns expects an array of regex statments matching file paths, not necessarily the file paths themselves. This is why using the "relative" paths worked. From the Jest API docs:

An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them. If a module's path matches any of the patterns in this list, it will not be automatically mocked by the module loader.

This is useful for some commonly used 'utility' modules that are almost always used as implementation details almost all the time (like underscore/lo-dash, etc). It's generally a best practice to keep this list as small as possible and always use explicit jest.mock()/jest.dontMock() calls in individual tests. Explicit per-test setup is far easier for other readers of the test to reason about the environment the test will run in.

It is possible to override this setting in individual tests by explicitly calling jest.mock() at the top of the test file.

(https://facebook.github.io/jest/docs/api.html#config-unmockedmodulepathpatterns-array-string)

and from the issue itself:

unmockedModulePathPatterns are used internally by Jest to create a RegExp against which all required modules will be tested. As such, you need to provide a valid regex pattern. For example, this worked nicely for me :

> unmockedModulePathPatterns: [
>       "node_modules\\" + path.sep + "react",
>       "node_modules\\" + path.sep + "reflux",
>       "node_modules\\" + path.sep + "react-router"
>     ],

• "mlarcher", (https://github.com/facebook/jest/issues/100)

Answer 3

I created an issue on their github page. Waiting to find out if it is actually a windows related issue

In the meantime, eventually got it working by just specifying the name of the module rather than the relative path

   "unmockedModulePathPatterns": ["react"]