I would like to move my jest config out of my package.json, i am trying to use the --config as suggested here but get the error argv.config.match is not a function
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --config jest.config.js",
"eject": "react-scripts eject",
},
cli
hutber#hutber-mac:/var/www/management/node$ npm test -u
> management-fresh#0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js
Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]
argv.config.match is not a function
npm ERR! Test failed. See above for more details.
For me appending -- --config=jest.config.js worked.
So the whole string react-scripts test -- --config jest.config.js in your case.
TL;DR
Add -- before your options.
"test": "react-scripts test -- --config=jest.config.js",
The problem here is with react-scripts not seeing the options being passed to
it. We can demonstrate this by running it directly.
./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function
./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.
Variations
How you pass options to scripts varies depending on which versions of npm or
Yarn you use. For completeness, here are the results for the variations:
# This runs, but completely ignores the option.
npm test --config=jest.config.js
# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js
https://jestjs.io/docs/en/cli#using-with-yarn
https://jestjs.io/docs/en/cli#using-with-npm-scripts
create react app sets up the test script in package.json with
"test": "react-scripts test",
You can set additional options like so.
"test": "react-scripts test -- --config=jest.config.js",
Something like this might work if you want to send options through the CLI.
"test": "react-scripts test --",
yarn test --bail
# comes through as
react-scripts test -- --bail
Resources
Here are a few resources to explain the different usage.
https://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f
For me adding jest as key in package.json file worked. Added all the required config as object in jest key rather than jest.config.js
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary",
"lcov",
"cobertura"
],
"testMatch": [
"**/*.test.js"
]
},
tldr
npm install jest --save-dev (not sure if this is required -- I just did it).
replace
"scripts": {
...
"test": "react-scripts test",
...
},
with
"scripts": {
...
"test": "jest --watch",
...
},
run tests as normal with npm test
Everything
Adding -- --config=jest.config.js sort of work for me: my tests passed, but then I was getting the following error (truncated):
Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.
This problem is noted in the comment above.
Here's what's going on:
npm test looks in package.json for whatever is in scripts.test and runs that. For create-react-app, that's react-scripts test. This, in turn, runs
/node_modules/react-scripts/scripts/test.js (source) (you can easily print debug this to see what's going on). This script builds up a jest configuration based on your environment. When you add:
"test": "react-scripts test -- --config=jest.config.js",
to package.json, this replaces the jest config that react-scripts test is trying to create (yea!), but it also munges the arguments that "test": "react-scripts test" generates (boo!), so jest thinks you're trying to pass in a test pattern (which is obviously not a valid test pattern).
So, I decided to try running my tests using the jest CLI. At least for me, it worked fine and picked up all of my tests. It automatically looks for jest.config.js, so that works, and you can pass --watch in to get the same behavior as react-scripts test.
Keep in mind that react-scripts test seems to be going through a lot of trouble to build up a 'proper' config; I definitely haven't tried to figure all of that out: YMMV. Here's the full set of options it creates in my env. E.g., for --config the next element in the array is the config.
[
'--watch',
'--config',
'{"roots":["<rootDir>/src"],
"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"],
"setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
"setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
"testEnvironment":"jsdom",
"testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
"transform":{
"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
"^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
"transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\\\.module\\\\.(css|sass|scss)$"],
"modulePaths":[],
"moduleNameMapper":{"^react-native$":"react-native-web",
"^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
"moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
"watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
"resetMocks":true,
"rootDir":"<my_root_elided>"}',
'--env',
'<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]
This one got me too! create react app is a bit tricky as it already contains jest. I removed the
--config jest.config.js line, and didn't need that extra test.config file.
I also made sure my enzyme file was named setupTests.js. The testing module will be specifically looking to run that file, so it must be named that. Also,I had to have it in my src/ folder, where before I had it in a src/test folder. If you are asking the above question you are probably past this point, but wanted to mention just in case. My setupTests.js looks like:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter()
})
For me, none of the above answers worked. But with the help of documentation, I found out the way around.
For this purpose, place the code you want to configure jest, in your_project_root_folder/src/setupTests.js. My your_project_root_folder/src/setupTests.js looks like this
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({
adapter: new Adapter(),
})
And one more important point, you need to use enzyme-adapter-react-16 for react v16 and enzyme-adapter-react-15 for react v15
Moreover, if you want to use enzyme-to-json, you can place the following code in package.json file
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}
I would try adding "test": "jest --no-cache -w 2" to your package.json. Then run npm run test
Related
I was building a simple React app using Tailwind. I used create-react-app and then installed tailwind. I have done this many times before.
In order to install Tailwind, I also had to install craco and change package.json "scripts" to use craco, like so:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
However, this time, when I ran npm start, I got an error that I had never encountered before:
Error: error:0308010C:digital envelope routines::unsupported
So I searched on StackOverflow and someone suggested adding --openssl-legacy-provider to my "start" script like this:
"scripts": {
"start": "craco --openssl-legacy-provider start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
And it's working now. But can somebody please explain to me what --openssl-legacy-provider actually is and how it works?
Due to changes on Node.js v17, --openssl-legacy-provider was added for handling key size on OpenSSL v3.
You somehow have installed the latest version of node.
Restore your previous version of nodejs.
Go and manually remove the node dependency(e.g. "node":17.4.3) from package.json
and packagelock.json.
Delete node_modules folder and use npm install to reinstall node_modules.
I have seen many answers regarding the OpenSSL issue that people encounter due to the changes on Node.js v17. Personally, I encountered the problem in a vue.js/electron application after switching to my new MacBook with M1 chip.
This GitHub issue lists multiple options that worked for different users.
In my scenario, adjusting the script commands in the package.json file worked:
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
I've seen user replacing th export with a run command.
Keep in mind that the syntax might differ on another Os. For example:
Set and set
The full issue with all possible answers.
Adding --openssl-legacy-provider in package.json sure works, but if you don't want to use the legacy SSL provider, you can upgrade your webpack- and react-scripts versions.
I had to first delete package_lock.json and node_modules/. Then I ran:
npm install --save-dev webpack#5.74.0 --legacy-peer-deps
npm install --save-dev react-scripts#5.0.1 --legacy-peer-deps
npm install --legacy-peer-deps
After this, I tested with:
npm start
I also had to fix a few other issues, but eventually got it working.
I have found a solution in this GitHub issue
and it works for my case.
For Node.js v17+, you need to put the openssl-legacy-provider flag after your command, for example:
From npm --openssl-legacy-provider start to npm start --openssl-legacy-provider start
From npm --openssl-legacy-provider build to npm start --openssl-legacy-provider build
... and so on.
I had this error in Nuxt 2.15
I fixed the error in the following way.
package.json edit
I had Ubuntu so this method worked for me
"scripts":{
"dev":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
My partner had Windows but the above method didn't work on it, then this method worked
"scripts":{
"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
The most interesting thing was that it worked in other ways in Ubuntu and Windows
I'm trying to get tests to run in a gatsby repo using Mocha, because we already have a lot of tests using mocha and chai, and we don't want to have 2 different assertion libraries, so we're not using Jest.
The first thing I did, is this:
npm i -D mocha chai #testing-library/react
Which installs mocha v8 and chai v4, Then I add a naive script in my package.json to see what happens:
"scripts": {
"test": "mocha --watch"
}
This gives me an error: unexpected token import for import { expect } from 'chai'; in my bare-bones test file. So next step, following Gatsby's conventions:
"scripts": {
"test": "npx --node-arg '-r esm' mocha --watch"
}
Okay, we're live, but no tests are running, next iteration:
"scripts": {
"test": "npx --node-arg '-r esm' mocha --watch 'src/**'"
}
Alright, now it crashes because of SyntaxError: Invalid or unexpected token for a <div> in a react component file.
At this point, I wonder if I really have to install babel and all of its machinery just to run a simple test, especially since gatsby does not use babel at all?
Does someone know of a really clean, modern setup that makes writing tests with mocha in Gatsby simple? Can esm be taught to read JSX without a pile of hacks?
At this point, I wonder if I really have to install babel and all of its machinery just to run a simple test
Unfortunately, yes.
, especially since gatsby does not use babel at all?
Actually that's not true, it's babel all the way down.
Thankfully, since Gatsby has already done all the tedious work of setting up babel, it's rather easy to set up your tests.
First, install the missing bits:
npm i -D #babel/register jsdom jsdom-global
Then add a fresh .babelrc at the root of the project with the following config:
{
"presets": ["babel-preset-gatsby"]
}
You don't need to install babel-preset-gatsby since it comes with all Gatsby setup.
That should be it. Now replace esm with #babel/register & register jsdom-global. Also make sure you set your NODE_ENV to test:
NODE_ENV=test npx mocha -r #babel/register -r jsdom-global/register ./src/**/*.test.js
And that should work.
When you add the test command to package.json, no needs to use npx:
"scripts": {
"test": "NODE_ENV=test mocha -r #babel/register -r jsdom-global/register ./src/**/*.test.js"
}
If you're testing Gatsby components, here's a few global variables you need to watch out for: __PATH_PREFIX__, __BASE_PATH__, and ___loader.
Mock them however you'd like, but for a quick and dirty test:
globalThis.__PATH_PREFIX__ = '/'
globalThis.__BASE_PATH__ = './'
globalThis.___loader = { enqueue: () => {} }
This question already has answers here:
NPM run * doesn't do anything
(2 answers)
Closed 3 years ago.
I'm trying to start a react js project but the npm start command doesn't do anything. No error messages. No exceptions. Just nothing.
I already have a start script in the package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I've also checked for missing dependencies but nothing is missing.
Is there something I'm missing here?
SOLUTION:
My npm ignore-scripts was set to true. So I set it to false and the npm start command works.
npm config set ignore-scripts false
To check if your ignore-scripts is true or false:
npm config get ignore-scripts
Thanks #RobC for the answer
NPM run * doesn't do anything
try putting npm run for scripts, just like
npm run start
I think it's just a bug. Try to run the command again to see if it works now. Or if the problem persist create another app and follow the instructions. Don't forget to checkout to the project directory as instructed: cd your_project_name. And another things: how did you create the app?
I obtained already existing React project and I'm supposed to continue with it.I never used React before. I need to use web worker in the project - there's a project that suits my needs: Worker Loader
The suggest one adds this to their webpack.config.js:
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
Then use worker like this:
import Worker from './file.worker.js';
const worker = new Worker();
But even though I can see that my React project uses webpack and babel o the background, there is no .babelrc or webpack.config.js in the project. This is how I run the project:
npm start
That actually runs react-scripts start based on what I see on package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Neither webpack nor babel are in package.json dependencies, so I really have no idea how are they run by React. I would really appreciate if someone explained to me how does it work and how to configure webpack to use worker loader.
You need to run npm run eject first.
This command will copy all of your configuration files into your project(including webpack.config.js). However, run this command only if you MUST because although you will have full control over your configuration, you'll be on your own. React won't manage the configuration for you anymore.
Not sure 100%, but I think this app was created using react starter kit called Create React App and it comes with a package called react-scripts which is a wrapper around the build tools -- webpack being one of them. So lookup that stuff in npm. It might be all taken care of for you
Also, see what you have under node_modules directory --i am guessing it's all there
I have two question on JS unit testing:
1) Is there some tool that allows to automaticaly run javascript unit tests when certain files are changed (like for example nodemon restarts node.js on js changes).
2) Is this strategy appropriate (efficient) way to run unit tests?
Thanks,
Alex
For those who are committed to using nodemon, nodemon -x "npm test" has worked for me.
A little explanation
nodemon --help says:
-x, --exec app ........... execute script with "app", ie. -x "python -v".
In our case npm test is set to run tests by configuring our package.json
For example:
"scripts": {
"test": "mocha"
},
When using jest, nodemon is not necessary. Simply set the test script command to jest --watchAll in package.json as follows:
"scripts": {
"test": "jest --watchAll"
}
Check out grunt build system and the watch task. You can setup grunt to watch for file changes and then run any tasks you want (test, lint, compile, etc...).
https://github.com/cowboy/grunt
Some of the ideas are covered in this tutorial. http://javascriptplayground.com/blog/2012/04/grunt-js-command-line-tutorial
Here's a snippet of my package.json:
"scripts": {
"develop": "nodemon ./src/server.js --watch src --watch __tests__ -x \"yarn run test\"",
"test": "mocha ./__tests__/**/*.js --timeout 10000" }
The develop script is my command line to run my express server (entry: ./src/server.js), watch the /src directory which has all my server/API code, watch the /__tests__ directory which as all my specs and lastly tells nodemon to execute the enclosed statement before each restart/run with -x \"yarn run test\"
yarn run test is no different than npm run test. I prefer yarn over npm so that part is up to you. What is important is the \" tags inside the JSON value... without it, it will fail since the argument will be tokenized incorrectly.
This setup allows me to trigger changes from either server/API code or writing/fixing specs and trigger full test run BEFORE restarting the server via nodemon.
Cheers!