Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jest React Example

Tags:

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 :)

like image 692
Ryan Lanciaux Avatar asked Jul 27 '14 13:07

Ryan Lanciaux


People also ask

Can you use Jest with React?

Jest is a JavaScript testing framework that allows developers to run tests on JavaScript and TypeScript code and can be easily integrated with React JS.


2 Answers

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"] 
like image 93
Ron Avatar answered Nov 03 '22 10:11

Ron


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)
like image 44
MaxPRafferty Avatar answered Nov 03 '22 09:11

MaxPRafferty