I have problem with configuration sonarqube to work properly with React + Jest.
My configuration:
my_moudle.sonar.projectBaseDir=front_app
my_module.sonar.javascript.file.suffixes=.js,.jsx
my_module.sonar.tests=src
my_module.sonar.test.inclusions=**/__tests__/** my_module.sonar.javascript.lcov.reportPaths=coverage/lcov.info
Currently I point to the src folder as tests folder because I have set of tests for each component in tests folder at the same project folder.
Thanks to SonarJS I have proper coverege for my project, but I don't know why I can't see amount of unit tests in coverage measures metrics.
Any checked configuration will be appreciate.
Thanks,
Barb
SonarJS is not responsible for Unit test reports, (Relevant FAQ entry)
It is the responsibility of SonarQube to import the Unit test report.
I have managed to do it with the following setup.
First we need to convert the jest results into sonar consumable format. For this, I used the following npm module: jest-sonar-reporter.
Snippet of my package.json:
"devDependencies": {
...
"jest": "^21.1.0",
"jest-sonar-reporter": "^1.3.0",
...
},
"jestSonar": {
"sonar56x": true,
"reportPath": "testResults",
"reportFile": "sonar-report.xml",
"indent": 4
}
You can will now need to tell jest to use this module as a processor and tell sonar scanner to use the file produced by this module. The instructions are in the official documentation.
If you are using create-react-app/react-scripts though, you may need a few additional steps, as all configuration is not exposed by them.
You will need to modify your entry for test in scripts block in package.json to:
"test": "react-scripts test --env=jsdom --testResultsProcessor ./node_modules/jest-sonar-reporter/index.js
Related
I have a fun project made with create react app. I want to convert the same application to a browser extension. This idea forces me to make the project a mono repo. Because in both applications, I will use the same components, hooks, providers, etc.
I don't want use Lerna or Yarn workspaces. And, this will be my first monorepo. I want to get start with Turborepo. However, I couldn't imagine how to make it work in a good way.
My targeted folder structure exists below
apps/
app1/
app2/
packages/
components/
hooks/
providers/
styles/
package.json
package-lock.json
I will import monorepo dependencies from packages folder into apps exists in apps folder.
For instance;
import { useExampleHook } from '#projectname/hooks'
import { ExampleComponent } from '#projectname/components'
If you have another solution besides Turborepo, don't hesitate to let me know. NPM workspaces is an acceptable solution as well. But, turborepo has the priority due to better performance.
Thanks in advance for your time and answer
TL;DR:
You can do this by using yarn workspaces to make the project a monorepo and then add turborepo to it as a dev dependency.
Steps:
Create a yarn workspace.
Configure your repositories root package.json file from step 1 as:
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
}
Now assuming from your example, you want to import files from packages/hooks into apps/app1, do the following:
//packages/hooks/package.json
{
"name": "hooks", // This can also be "#projectname/hooks" if you prefer
"version": "1.2.3",
...
}
//apps/app1/package.json
{
"name": "app1",
"version": "2.3.4",
"dependencies": {
"hooks": "1.2.3" //This version here must be same as the one in hooks package.json
}
}
// Some js file in apps/app1/...
import { useExampleHook } from "hooks";
...
Now if you want you should be able to install Terborepo to manage your monorepo. (Haven't personally tried this step but theoretically should work)
Tips:
Go through the yarn workspace docs and tutorials.
If you want to convert an existing react project into a monorepo, first transfer all your files to a folder such as root-dir/apps/app1 and then follow from step 1 inside root-dir.
Turborepo has great explanation on how to do it, right in their docs.
In short:
Turborepo is considered to be a taskrunner. So, it is added as a development dependency to your existing project.
npm install turbo -D
The only thing you should watch out tho is the turbo tasks itself.
So, you will have to tweak your start scripts and pipelines.
I'm trying to work with Cypress and Storybook for visual testing in a React Typescript project.
The main goal is to render all my components library with Storybook and then visit them through Cypress and have the code coverage in order to pass it to SonarQube.
The problem is the instrumentation with Storybook, I have found no mentions about it. For example I run my server with the following script : react-scripts -r #cypress/instrument-cra start
The "-r #cypress/instrument-cra" will generate the coverage files while Cypress runs and it works great.
Then with Storybook : start-storybook, it run but no code coverage is generated because the app isn't instrumented.
I wish i could do something like : start-storybook -r #cypress/instrument-cra but the "-r" argument is part of react-scripts and I don't know how to reproduce with Storybook.
Is there an another way to get it working, or do I have missed something after hours or searching ?
You need to add babel-plugin-istanbul to the babel config that storybook is using.
Essentially recreating what instrument-cra is doing:
https://github.com/cypress-io/instrument-cra/blob/master/index.js
I am using Jest + Enzyme for unit testing of react application, and I am also using my company owned dependent libraries as node_modules , those are in Javascript (ES6) but my application and my test scripts are in TypeScript, so here while running tests Jest is throwing type errors from those libraries ( node_modules) as you see in below picture, Abstract.jsx is coming from dependent node_modules
I am using below setting in jest config which is not helping, how to fix this continuous type errors. please help
"globals": {
"ts-jest": {
"diagnostics": false
}
},
, Abstract.jsx is coming from dependent node_modules
The module should come with compiled .js files. It seems that it doesn't
Options
Pick one:
Ask the module author to publish built .js files (recommended)
Build them yourself. Add a .jsx to .js build workflow into your setup.
I am trying to integrate Jest flow runner with my app created with create-react-app as I want to run my flow type checks along with the test cases.
I followed the steps given in the Jest platforms video and added:-
{
"jest": {
"runner": "jest-runner-flowtype"
}
}
in my package.json but got this message:-
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:
• runner
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 a way to use both jest flow runner & test runner at the same time with jest?
I read on create-react-app testing guide but couldn't find a way to add one runner.
Update:
I tried ejecting from the create-react-app and added projects option:-
"projects": [
{
"displayName": "flow",
"runner": "jest-runner-flowtype",
"testMatch": ["<rootDir>/**/*.js"]
}
]
and tried running yarn jest --env=jsdom still no flow types are errors are being displayed.
I am working on an application that was recently converted from an old Webpack build to use create-react-app. Most of the transition has went smoothly, but I'm running into some major issues with the previous unit tests. When I run npm test which has the standard package.json test script of "test": "react-scripts test --env=jsdom", it says all my snapshot tests have failed. This is fine and expected since there have been a lot of changes, and the tests need to be updated.
However, when I just run jest or jest --updateSnapshot, all of my tests immediately fail with SyntaxError: Unexpected token errors, most of which are related to import. This leads me to believe that Jest isn't using Babel to transform the ES6 syntax correctly.
Previously, we used a .babelrc file with these settings:
{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}
But since Babel is already included in create-react-app I removed this file as well as any references to Babel. My package.json also does not have any special scripts set up for Jest itself.
I have tried adding some of the previously used Babel packages back in, but after further reading it seems those won't work anyway unless I eject from create-react-app and that is not an option at this time.
What would cause npm test to run correctly but jest to fail miserably?
It turns out it was a Babel issue. Even though create-react-app comes pre-configured, we still had to add in custom configuration since our app wasn't initially built with cra. I installed some new dev dependencies:
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also updated the .babelrc:
{
"presets": ["babel-preset-react-app"]
}
And now both jest and npm test both work as they should.