I use #testing-library/react-native to test my RN app. When I run yarn test, following error occurs.
#testing-library/react-native should have "jest-preset.js" or "jest-preset.json" file at the root.
I use typescript for my app.
my test script is like this.
test": "jest --config jest.config.json"
jest.config.json file is like this.
{
"preset": "#testing-library/react-native",
"collectCoverageFrom": ["src/**/*.{ts,tsx}"],
"moduleDirectories": ["node_modules", "src"],
"setupFiles": [
"<rootDir>/jestSetup/setup.js",
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?(react-native|#?react-navigation|#react-native-community))"
],
"coveragePathIgnorePatterns": ["/node_modules/", "/jestSetup", "/src/config.ts", "/src/app.tsx"]
}
Why am I getting this error?
I'm using expo and after updates from 38 to 39, Jest stopped working. I had same issues — it was complaining about missing preset js files.
Preset below didn't work for me:
"preset": "#testing-library/react-native",
So I have changed jest.config.js like this:
module.exports = {
clearMocks: true,
coverageDirectory: 'coverage',
testEnvironment: 'node',
preset: './node_modules/jest-expo/jest-preset.js',
}
Changed preset file location to expo's one which im using and it did the work
The preset no longer exists in >=7.0.0 "#testing-library/react-native". According to the documentation it seems "react-native" should be used as the preset.
"preset": "react-native",
V7 upgrade documentation reference
For those seeing this in a fully up to date project, the missing file is [./node_modules/]react-native/jest-preset.js and you need to make sure that react-native itself is installed.
This will happen if you don't have react-native install globally.
yarn add react-native (or do it globally)
so in package.json you should see something like:
"react-native": "0.66.3",
Related
I am new to Next and React. I have a use case where we have a nextJs application that uses react-native and react-native-web, let's call it A. A is intended to be used either for web and native through different build entry. I have another React app, call it B, that provides a web component to be used by A. Now I can build A and B successfully, but when I start A in web, I got
Module not found: Can't resolve '<B>'.
My IDE can't link this either. When I command click the import, it says nodule not installed even though I did.
I've checked that B's build artifacts do exist in A's node_module, and everything is referenced correctly in package-lock.json. Previously we were using react-native-builder-bob (link) to build B and it was working fine. But react-native-builder-bob is meant for React Native applications and we would like to have better control of the building behavior in the future. My guess is that there is probably some issue with transpiling B that Next is not picking up the dependency.
Here is my .babelrc in B:
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
.bablerc in A:
{
"env": {
"next": {
"presets": ["next/babel"],
"plugins": [["react-native-web", { "commonjs": true }]]
}
},
"presets": ["module:metro-react-native-babel-preset"]
}
I think I've got the same babel configuration that react-native-builder-bob is using. Is there anything I am missing?
Checked node_module folder that build artifacts exist.
Everything is correctly referenced.
Works fine with bob build
The react-native-builder-bob configuration is:
"react-native-builder-bob": {
"source": "src",
"output": "lib",
"targets": [
"commonjs",
"module",
[
"typescript",
{
"project": "tsconfig.json"
}
]
]
},
How should I change the configs to make it work?
I want to add the following babel configuration in react-scripts I don't want to eject from cra I want to keep using it without ejecting. I see there is a way to fork the repo and add your custom configuration. But I want to know where exactly I can paste this.
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
There is, in theory, customize-cra, which lets you do things like override Babel plugins.
Here is a list of things you can do.
It doesn't appear to be maintained at time of writing, and for me didn't seem usable if your project is modules-based (ie import) as opposed to require.
CRA itself recommends forking their scripts as an alternative to ejecting, which is a pretty bold statement.
If you wish to override a property of one of the config files of React, you can just create that config file in your project's main directory and just set that single property, this will override that property in React's configuration. For babel you can just add it as a property in package.json like so:
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
If you run npm run-script eject you are going to get a copy of all the config that ReactJS uses for your project in the main directory of your project/config, from there you can edit whatever you like, keep version tracking of your changes and not mess with the react repository.
If you insist on forking it you can fork the main create-react-app repository from here, which contains the react-scripts here
trying to setup jest to work with css decorators.
The css file linked to my react component has:
#import './another.css'
Now, when I run jest I get:
SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):
Then I went to my .babelrc and added:
"env": {
"test": {
"plugins": [
"#babel/plugin-proposal-decorators", { "legacy": true },
]
}
Running jest again I get
[BABEL] /Users/thiagofacchini/Documents/atomix/src/library/protons/Animator/tests/index.test.js: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option.
(While
processing:/Users/thiagofacchini/Documents/atomix/node_modules/#babel/plugin-proposal-decorators/lib/index.js")
Also tried to change my .babelrc to:
"env": {
"test": {
"plugins": [
"#babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true ,"legacy": true },
]
}
}
But get exactly the same error.
My package.json looks like:
"#babel/core": "^7.3.4",
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/preset-env": "^7.3.4",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#logux/eslint-config": "^27.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
NOTE: The error is just happening on JEST, my development build works fine.
I googled the hell but I simply cannot understand what's going on. Maybe something with versions? I'd appreciate any help.
When you run your app in development build the build process is taken care of by webpack/parcel/whichever tool you're using.
These tools allow you to (via the use of plugins) do thing like import css into javascript and then eventually spit it back out as css at the appropriate time. This is not a native feature of javascript.
Jest runs on node js which doesn't have all of the features of webpack and cannot parse raw css etc.
So when you had the error "SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):"
this is actually nodejs trying to parse the css as javascript! You can read more about what it though you were doing here https://www.sitepoint.com/javascript-decorators-what-they-are/
So how do you manage css in your jest environment?
in your jest configuration you set it up so that you don't import the css and instead you import a blank module.
first npm install identity-obj-proxy
then add the following to your jest.config.js
moduleNameMapper: {
"\\.css$": "identity-obj-proxy",
"^lodash-es$": "lodash"
},
When using create-react-app with react-scripts-ts to use TypeScript, running the tests with the --coverage flag leads to incorrect coverage reports. Is there any way to integrate ts-jest so that the coverage reports will be accurate?
Below is my jest configuration in package.json:
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"mapCoverage": true,
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
}
}
Edit: This is the error message I am getting:
Out of the box, Create React App only supports overriding these Jest options:
• collectCoverageFrom
• coverageReporters
• coverageThreshold
• snapshotSerializers.
These options in your package.json Jest configuration are not currently supported by Create React App:
• transform
• testRegex
• moduleFileExtensions
• mapCoverage
If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.
Is there any reason you are using react-scripts-ts/ts-jest instead of regular out-of-the-box Create React App? It has been supporting TypeScript natively for a while now. I'd suggest doing that, as fighting against in the defaults of CRA is generally a pain point.
I am new to jest and facing issues with .babelrc. As suggested in docs, I have to put following content in .babelrc file for jest to run:
// .babelrc
{
"presets": ["es2015", "react"]
}
But my project already has .babelrc file with following content:
{
"presets": [
"es2015",
"react",
"stage-0"
]
, "plugins": [
"transform-object-rest-spread"
, "transform-decorators-legacy"
, "transform-es2015-modules-amd"
]
}
If I try to run jest with already present file, it gives me error: ReferenceError: define is not defined. But if I remove the "transform-es2015-modules-amd" plugin property from the .babelrc file, it runs fine. The issue is I cant remove the property as it is being used somewhere else. Can i create separate .bebelrc file for jest and map it accordingly or any other solution? Please share if any.
For running tests in command line, you can put separate .babelrc file in the project's root dir. For example .babelrc:
{
"presets": ["env"]
}
run tests in terminal (console):
yarn test