I have create an app with create-react-app.
I have set in .env my NODE_PATH=src/
All works fine when I launch react-script start but when I launch react-script test I have an error: import is not found.
In my package.json :
"test": "jest --colors --coverage test"
Edit
It work fine with:
"jest": {
"modulePaths": ["src/"],
"testURL": "http://localhost",
"jest": "^22.4.4"
}
You should execute your tests with
npm test
instead of directly using react-scripts here. Jest is automatically configured while using project created by create-react-app.
If you want to directly call jest instead using the bundling set in react-scripts, you have to call:
"test": "./node_modules/jest/bin/jest.js --colors --coverage test"
Related
I have setup jest and jest-junit as the reporter and followed the simple instructions given by jest-junit.
This includes npm install jest --save-dev and npm install jest-junit --save-dev
My package.json looks like this (excerpt):
"devDependencies": {
"jest": "^22.4.4",
"jest-junit": "^4.0.0",
},
"scripts": {
"test": "jest --ci --testResultsProcessor='jest-junit'"
},
"jest": {
"verbose": true,
"testResultsProcessor": "jest-junit"
},
"jest-junit": {
"suiteName": "Test Suite",
"output": "./junit.xml"
}
When running npm run test on my machine (OSX), it works well. When running it as part of the CI build process or on another Windows machine, I am getting the following error:
Module 'jest-junit' in the testResultsProcessor option was not found.
Maybe you just need to install the missing module to the other machine:
npm install jest-junit
Found the solution and it was the removal of inverted commas.
"test": "jest --ci --testResultsProcessor='jest-junit'"
should become
"test": "jest --ci --testResultsProcessor=jest-junit"
I have a test file like so: (I am using create-react-app)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/Calculator';
import { getAction, getResult } from './actions/'
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
it('renders without crashing', () => {
const wrapper = shallow(<App />)
expect(toJson(wrapper)).toMatchSnapshot();
});
it('displays the choosen operator', () => {
const action = {
type: 'GET_ACTION',
operator: '+'
};
expect(getAction("+")).toEqual(action)
})
it('displays the typed digit', () => {
const action = {
type: 'GET_RESULT',
n: 3
};
expect(getResult(3)).toEqual(action);
})
it('checks that the clickevent for getNumber is called',() => {
const clickEvent = jest.fn();
const p = shallow(<p data-n="1" onClick={clickEvent}>1</p>)
p.simulate('click')
expect(clickEvent).toBeCalled();
})
and a package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
// "test": "react-scripts test --env=jsdom",
"test": "jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest": "^22.4.3"
}
}
when I run jest --updateSnapshot I get:
command not found: jest
but jest is installed.
Jest is installed, but is likely in your ./node_modules/.bin directory. You can append that to your command ./node_modules/.bin/jest --updateSnapshot. Since you already have jest as a scripts command in your package.json you can also run it with npm test -- --updateSnapshot. npm automatically adds ./node_modules/.bin to your path.
update: Newer versions of yarn will resolve node module bin scripts, so you can also just run yarn jest {cmd} and it should work.
I ran into similar issue. I fixed it by installing jest globally.
npm install -g jest
You need to run it this way :
./node_modules/.bin/jest
or run npm test
Install the Jest command-line interface (Jest CLI):
npm install --save-dev jest-cli
Then run the jest command. Working for me in a linux instance by docker on Windows 10.
I was getting zsh: command not found: jest after installing jest and trying to use the command jest. The solution that worked for me was running npx jest
A way to solve the error is to use the "npx" command.
npx jest --version
npx jest --init
In my case, npm didn't install the jest command for some reason.
To fix this:
I deleted the node_modules/jest directory
Re-ran npm install and got the jest command installed.
try using the command
npx jest <folder>
I ran into the same problem. I tried multiple solutions and this worked.
I also have jest CLI installed
you can install it by using this command in your shell
npm install --save-dev jest-cli
just use command
npm test or npm t
Removing node_modules and running npm install again fixed this for me
Also the "new" npm ci command can fix this as it deletes (or clears) node modules and performs a clean install each time, plus it's faster compared to manually deleting node_modules and re-installing
My situation was caused by my git pipeline. I wasn't caching node_modules nor was I caching untracked files.
Ultimately I added
cache:
# untracked: true
key:
files:
- package-lock.json
paths:
- node_modules
to my pipeline .yml and violá
Note
you can either use path OR untracked, find out more about each to see what works best for you
Just reload your bash config file after install jest:
source ~/.bashrc # on linux ?
source ~/.bash_profile # on macOs
Jest will be not recognized but executed with npx jest automatically
I use yarn. Adding jest and jest-cli to node_modules did not make any difference with my attempts to run tests like jest mytest.test.js. In addition to mentioned steps, the following helped to get it running:
yarn jest mytest.test.js
you can run ln -s ./node_modules/.bin/jest jest
and then run jest --init it will work. Or you can install jest cli with npm install --save-dev jest-cli and then run jest --init it will also work.
In my case, I was trying to install jest with yarn on a pipeline to run tests and since I had jest installed as a devDependency it wasn't installing on yarn install.
I found this bug on GitHub https://github.com/yarnpkg/yarn/issues/2739 that it seems that Yarn will not install devDependencies when NODE_ENV=production.
I just needed to change the NODE_ENV and after that, it was working, otherwise, run it like this:
yarn install --production=false
Faced the same issue. But it was due to the wrong node version. If you use the latest jest v29, you need Node version 14 or higher.
You can run the test using npx jest [parameters]. npx is the package runner. It will help you execute a locally installed package.
Had the same issue and was able to solve it by running npm install
Alternatively, just add jest module to package.json dependencies.
{
"dependencies": {
...
"jest": "^29.3.1",
...
}
}
Is it possible to specify the location of mocha.opts when running nyc mocha? I'd like to have it in the root project folder. I tried this in my npm script:
"scripts": {
"test": "nyc mocha --config ./mocha.opts"
},
That did not work. I did get a test case working for the setup described here however, with mocha.opts in the test directory.
mocha --opts <path_to_opts_file>
I have a Node.js app using TypeScript and now I want Jasmine to run tests automatically each time I make changes in .ts files. So I'm just trying to find an appropriate command to be run as npm test in command line or a package that can watch my .ts files compile them on changes and run jasmine. Does anybody know a solution for it?
The easiest way I found is
installing dependencies: npm install --save-dev jasmine-ts nodemon
initializing jasmine: node_modules/.bin/jasmine-ts init
In the package.json:
"scripts": {
"test": "nodemon --ext ts --exec 'jasmine-ts \"src/**/*.spec.ts\"'"
}
Edit: the above solution doesn't work as of the 11th of Apr, 2019. I published a modified working example at https://github.com/erosb/ts-node-jasmine-example
This may be done with two commands launched in separate terminals. Assuming packages are installed in global mode.
First command launches TypeScript compiler in watch mode:
tsc --watch
The second starts nodemon that watches .js files and restarts on changes. Each time it executes jasmine test runner:
nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'
This solution is fast enough though it also has a drawback of running in two terminals. So it is not ideal but the best I've found so far.
As a result scripts section in package.json looks like:
"scripts": {
/* ... */
"watch": "tsc --watch",
"test": "nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'",
"devstart": "nodemon ./bin/www"
},
devstart also works in couple with watch restarting server each time .ts files are changed (after they are compiled to .js).
You might consider using jasmine-node. I don't think that jasmine itself has a watch option.
npm i -g jasmine-node
Assuming that your test command in your package.json scripts block is something like this:
"scripts": {
...
"test": "jasmine some-directory-or-glob-pattern"
...
}
Use jasmine-node and add the --autotest and --watch flags to that command:
"scripts": {
...
"test": "jasmine-node --autotest --watch some-directory-or-glob-pattern"
...
}
Previously described methods either did not work, or were slow to compile code. Here is my attempt to solve this, both fast and convenient, works great for me. The only downside is that jasmine would not know which tests are affected by TS recompilation and would run all the tests.
yarn add tsc-watch --dev
yarn run tsc-watch --onSuccess "yarn run jasmine --config=jasmine.json"
NPM version:
npm -i tsc-watch
npm run tsc-watch --onSuccess "npm run jasmine --config=jasmine.json"
In my case I needed to correctly map TS paths. The full command looks like this:
yarn run tsc-watch --onSuccess \
"node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine \
--config=jest/jasmine.json --require=dist/jest/setup.js $targetFile"
jasmine.json
{
"spec_dir": "dist/src",
"spec_files": ["**/*.e2e.js", "**/*.unit.js", "**/*.spec.js", "**/*.test.js"],
"env": {
"random": false
}
}
Just an example, please adjust to your needs.
tsc-watch starts a TypeScript compiler with --watch parameter, with the ability to react to successful compilation and start tests.
I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks
Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:
Install npm-watch
npm i --save-dev npm-watch
package.json
{
"name": "react-app",
"version": "0.1.0",
"private": false,
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.
Update:
React-scripts now includes a proxy option that proxies requests to a different host/port. For example, if your backend is running on localhost at port 9000 under the /api route, then you would add this line to your package.json: "proxy": "localhost:9000/api". You could then make requests as you normally would in production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)
While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.
If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.
In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.
Run your backend on a different port. If your running on express modify the file bin/www
var port = process.env.PORT || 9000
and in your /src folder create a config file where you configure your api host,routes, params etc
//config/index.js
export const Config = {
protocol: 'http',
host: window.location.hostname, //or the environment variable
params: '/api/',
api: {post:'/posts/'}
}
and in your calling component or where ever your calling the api's
import {Config} from '../config'
axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)
The easiest way that I found (as of 10/19/21) is to use cra-build-watch.
Works perfectly.
i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.
"scripts": {
"start": "set PORT=8080 && react-scripts start",
"build": "react-scripts build",
"deploy": "set PORT=8008 && serve -s build"
}
npm start : run project for development(windows)
npm run-script build : build the production build
npm run-script deploy: run the production build
npm install -g serve before run npm run-script deploy.
1> npm install create-react-app -g
2> create-react-app Your_Apps_Name