I have a react project in this git repo created from scratch without using create-react-app, so I am using jest.config.js and jest.setup.js files as suggested by msw doc for mocking network request for testing. I get the below error when I executing the test.
(node:12207) ExperimentalWarning: The fs.promises API is experimental
console.error
Error: Error: connect ECONNREFUSED 127.0.0.1:5000
The same test code works fine when I create a new project using create-react-app containing setupTests.js, but I want to mock api request in a react project which was created manually from scratch.
Any suggestion?
In the tutorial for msw, the mock server is configured in setupTests.js.
Because CRA (create-react-app) already configure jest for you and CRA will load setupTests.js when you run test with react-scripts test.
If you want to create a new project from scratch (supposed you already installed react, react-dom, ... ).
You have to config jest your self (refer this docs), steps needed:
Change test scripts in package.json to jest
Install dependencies (babel, preset for jest, etc)
Config jest with jest.config.js (like you did, i also add jsdom as test environment)
Setup jest.setup.js to load mock server
I created a PR that did above steps for you, to test just run
npm run test App.test.js
Output:
Related
I am working on a react based frontend app that I am unit testing using mocha / enzyme.
The stack includes webpack, react, mocha + enzyme for testing, and firebase for auth / db / etc.
When I try and run npm test I get the following error due to firebase:
WEBPACK Compiled successfully in 3412ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'stringify' of undefined
at Module.eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:31:308)
at eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:136:30)
...
npm ERR! Test failed. See above for more details.
What could be causing this error? This didn't happen before I imported firebase. Is there a webpack config I should tweak?
So, I've just figured this out. It seems to be an issue with how the tests are being loaded, causing the firebase package to be loaded in "web" mode even though the mocha test process is building in "node" mode... or something like that.
Anyways, here's the link that helped me solve this issue: https://github.com/firebase/firebase-js-sdk/issues/1455#issuecomment-455712500.
Essentially, ignore node modules (specifically firebase) when bundling.
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 have Jest+Enzyme setup to test my React app and I use brunch to build the app. When I run brunch, I got following error
Processing of node_modules/enzyme/build/react-compat.js failed. Error: Could not load module 'react/addons' from '/home/Project/node_modules/enzyme/build'. Possible solution: runnpm install.
But I have no trouble running Jest. I use yarn and yarn install does nothing as I have all packages installed. What is this missing react/addons package?
Solved the issue by telling brunch to ignore my test files
conventions: {
ignored: [
'**/*.test.js'
]
}
I am trying to setup an server rending react using react-router-4. While it works just fine on the front-end side (Webpack). It appears that preact-compat is not working when used in the server side. I am using babel-register so transpile the code.
I have a branch here for reference:
https://github.com/abarcenas29/preact-sandbox-v0/tree/wip/isomorphic-react
to run:
yarn run install
yarn run start:prod
go to localhost:3100
Using Babel to alias a dependency doesn't make sense, because Babel does not run on your dependencies (in node_modules). Use something like module-alias instead.
Full answer to the same question is on Github: https://github.com/developit/preact-compat/issues/390#issuecomment-304334947
My project is going from standalone to Web, Our new WebSite is getting created in AngularJS so Protractor is the tool selected for Test Automation.
I want to Integrate Typescript with dependencies of Jasmine and Node so that I don't get errors such as
cannot find name Describe
cannot find name it
cannot find name Expect
Can Anyone tell me how to add Jasmine and Protractor dependencies, so that when I hit ctrl + space i'll get all options available.
I have installed Typescript. And I am getting protractor dependencies such as browser, element, by etc.
What should i do for describe,it,expect (Jasmine stuffs) ?
I use Visual Studio Code everyday to write my scripts, it's my current favourite editor for Protractor because of its built in support for TypeScript!
Here are the following things which can come into my mind which could help you setup your framework-
Download the latest VS Code version - https://code.visualstudio.com/download
Install typescript globally npm install -g typescript
Install protractor globally npm install -g protractor
Create your project folder
Setup you project folder for git, node and typescript -
npm init -f // will create default package.json stating its nodejs project
git init // will create .git file, you project is now git project
tsc --init // will create tsconfig.json stating its typescript project
Install typings and dev dependencies-
npm install --save-dev protractor // this will install protractor as a dev dependency
npm install --save-dev typescript // this will install typescript as a dev dependency
npm install --save-dev #types/jasmine // jasmine typings
npm install --save-dev #types/node // node typings
At this point you have setup your basic protractor-typescript project and you can see all the typings and dependencies in package.json. Now you are good to write your typed scripts :).
Now compile your scripts by running -
tsc or tsc -w
After successfull compilation all your javascript files would be generated.
The run protractor
protractor config.js
You can also setup your vs code for debugging with protractor which I have mentioned here - Protractor -VS Code Debugging
For more details pls refer the TypeScript Tutorial, Protractor API
The Typescript error you are observing this is due to VS Code not recognizing global typescript 2.0 version.
To solve this open vscode go to preferences--> user settings --> settings.json will be opened and enter the highlighted path as shown
Save your file and restart VSCode now you are good to go :)
I agree with the answers given. Just want to share a hack with you.
You don't need to transpile your Typescript codes to JavaScript anymore.
Create a launch.js file
require('ts-node').register({
compilerOptions: {
module: 'commonjs'
},
disableWarnings: true,
fast: true
});
exports.config = require('./config/protractor.conf.ts').config;
And kick start protractor execution like:
> protractor launch
You can save yourself from the headache of transpiling every time you make a change to typescript files.
Happy testng!