We Keep Coding

Trying to run Jest on React Native, multiple Errors occur, last one is: TypeError: Cannot read property 'createAnimatedComponent' of undefined

I am new to Jest. I'm trying to run it with the most basic test:
//App-test.js
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
});
But I keep getting the Error: ● Test suite failed to run
TypeError: Cannot read property 'createAnimatedComponent' of undefined
at Object.<anonymous> (node_modules/react-native-screens/lib/commonjs/index.js:27:23)
at Object.<anonymous> (node_modules/react-navigation-tabs/lib/commonjs/navigato/createBottomTabNavigator.tsx:10:1)
My jest config in my package.json looks like this:
"jest": {
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transformIgnorePatterns": [
"node_modules/(?!react-native-screens|react-navigation-tabs)/",
"node_modules/(?!react-native-payfort-sdk|react-native|Hacktor|react-native-button|react-navigation)/"
],
"haste": {
"defaultPlatform": "android",
"platforms": [
"android",
"ios"
]
}
}
and my babel.config.js looks like this:
// babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = [
[
'#babel/preset-env',
{
modules: 'auto',
useBuiltIns: 'entry'
}
],
'#babel/react',
'#babel/preset-flow'
];
const plugins = [
'#babel/plugin-transform-flow-strip-types',
'#babel/plugin-proposal-class-properties',
'#babel/transform-runtime',
'add-module-exports',
];
return {
presets,
plugins
};
};
I don't know what I can do anymore. My code is so full because with the most basic settings I was getting every error possible. I'm also running a basic addition test which looks like that:
const functions = require('./functions');
test('Adds 2+2 to equal 4', ()=> {
expect(functions.add(2,2)).toBe(4);
});
which works just fine.
EDIT:
I redid TransformIgnorePatterns like so:
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation|#react-native-community|#react-navigation/.*)"
],
And the Error is still this:
● Test suite failed to run
TypeError: Cannot read property 'createAnimatedComponent' of undefined
at Object.<anonymous> (node_modules/react-native-screens/lib/commonjs/index.js:27:23)
at Object.<anonymous> (node_modules/react-navigation-tabs/lib/commonjs/navigators/createBottomTabNavigator.tsx:10:1)

can you try this:
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation|#react-native-community|#react-navigation/.*)"
],

Jest tests not working after moving to TypeScript

Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.
jest.config.js
module.exports = {
collectCoverageFrom: [
'/src/**/*.{js,jsx,vue}',
'!**/node_modules/**',
'!**/vendor/**',
],
moduleFileExtensions: [
'ts',
'js',
'json',
'vue',
],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
],
};
A snippet of an example test that's failing right now, which has been working fine previously.
some.test.js
function mountStore(loggedInState) {
const store = new Vuex.Store({
modules: {
customer: {
namespaced: true,
state: {
isLoggedIn: loggedInState,
},
actions,
},
},
});
return shallowMount(Component, {
localVue,
store,
router,
stubs: { 'router-link': RouterLinkStub },
});
}
describe('Test with customer logged in at beginning', () => {
let wrapper;
beforeEach(() => {
wrapper = mountStore(true);
});
it('should redirect to home if user is logged in on init', () => {
expect(wrapper.vm.$route.name).toBe('Home');
});
});
Regarding this specific test case, the result is as following.
expect(received).toBe(expected) // Object.is equality
Expected: "Home"
Received: null
I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency combination would lead to a faulty behavior.
Relevant dependencies I've updated, which eventually would lead to even more failing tests.
jest
ts-jest
babel-jest

Add
preset: 'ts-jest/presets/js-with-babel',
to jest.config.js since you use ts-jest with babel-jest. Source.

Did you try adding #types/jest? And adding it in your tsconfig.json:
"types": ["#types/node", "#nuxt/types", "#types/jest", "nuxt-i18n"]

I was having a similar issue. #winwiz1's answer worked for me, but I needed to put it inside the project definition as I'm using the projects syntax. I would just leave this as a comment on #winwiz1's answer, but StackOverflow mangles the format.
projects: [
{
"displayName": "test-unit",
"preset": "ts-jest",
"testMatch": ["<rootDir>/test-unit/**/*\\.tests\\.[t|j]s"]
}
],

Jest - ReferenceError: define is not defined

I'm trying to use jest to start doing some unit testing but I've come across this error that a lot of people seem to be getting but I can't seem to figure it out.
Here's is what I'm trying to do (and I realize requirejs isn't supported):
jest.mock("../widgets/", () => {
return <button>button</button>;
});
describe('TextInput', () => {
describe('when user inputs a value', () => {
it('calls correct function to handle change', () => {
const handleChange = jest.fn();
const value = "test"
const wrapper = shallow(<TextInput handleChange={handleChange} />);
const textInputElement = wrapper.find("#textfield");
textInputElement.simulate('change', {target: { value }})
expect(handleChange).toHaveBeenCalledTimes(1);
});
});
});
import React from "react";
import ReactDOM from "react-dom";
import * as TestUtils from "react-dom/test-utils";
import { TextInput } from "../widgets/";
and here is my package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.js"
],
"setupFiles": [
],
"testMatch": [
"**/src/**/?(*.)+(test).js"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js)$": "./node_modules/babel-jest",
"^.+\\.css$": "./config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "./config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
}
Upon running jest, I get the error ReferenceError: define is not defined and here is a more detailed error:
I would appreciate any help! Been pulling my hair out over this for the past few days :-(

Edit: Just realized that according to docs toHaveBeenCalledTimes should in fact also work. Anyway you could give mock.calls.length a try.
As far as I know assertions on jest function mocks do not work like this
expect(handleChange).toHaveBeenCalledTimes(1);
You should give this a try
expect(handleChange.mock.calls.length).toBe(1);
As described in the docs

Jest css-modules SyntaxError: Unexpected token

I have set up my jest to allow static files after following their documentation on how to do so, but I still recieve the following error.
How can I can it to pass and create a snapshot.
Terminal Error
FAIL src/components/Splash/Splash.test.js
● Test suite failed to run
/var/www/com/src/components/shared/logo/_Logo.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
^
SyntaxError: Unexpected token .
3 |
4 |
> 5 | import logo from './_Logo.css';
6 | import * as font from '../font/fontello.css';
Splash.test.js
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';
it('Splash page is rendered', () => {
const result = shallow(
<Splash />,
);
expect(shallowToJson(result)).toMatchSnapshot();
});
Jest Config
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
"moduleFileExtensions": [
"js"
],
"moduleDirectories": [
"node_modules"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/app/"
],
"moduleNameMapper": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}
},
"transform": {
"^.+\\.js$": "babel-jest"
}
}

It may work who use create-react-app from feb 2018.
I partially followed the docs jest webpack to make it work.
Also found out the moduleNameMapper cannot be overriden in package.json but in jest.config.js it does the trick.
Unfortunately i havent found any docs about why it does but here is my answer.
Here is my jest.config.js:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and #import quite well.
I added to devDependencies identity-obj-proxy

There is a small mistake: moduleNameMapper: {moduleNameMapper{}} should just be moduleNameMapper:{}
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
}

How to solve issue in jest unit test?

I have a unit test for a ReactJs/Typescript project that has a reference to a module called nock.js, and using jest:
import nock from 'nock'
...
afterEach(() => {
nock.cleanAll();
})
When I run the test I get an error in the .cleanAll statement:
TypeError: nock_1.default is not a function
However when I change the import statement to :
var nock = require('nock');
The issue is solved. How can I still use import instead of require ? Is this an issue with the jest configuration? This is the config:
"jest": {
"transform": {
"^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"testRegex": "/__tests__/.*\\.(ts|tsx|js)$"
},

If a module has a default export, you can use:
import nock from 'nock'
But if it doesn't have a default export, you'll need to use:
import * as nock from 'nock'

I met the same exact issue, and fixed it by adding the following config to my tsconfig.json:
{
...
"esModuleInterop": true
...
}