To run my UTs I run the command:
BABEL_JEST_STAGE=0 jest
How can I use iron-node to debug my unit tests?
btw, my package.json has a standard jest configuration:
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"testFileExtensions": [
"es6",
"js"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"unmockedModulePathPatterns": [
"react"
]
}
I recently wrote a doc about how to debug grunt tasks. With a good chance you can apply this technique to debug jest.
https://github.com/s-a/iron-node/blob/master/docs/DEBUG-NODEJS-COMMANDLINE-APPS.md
Related
For some reason I can't seem to split out "cypress, puppeteer and jest unit tests" into separate commands:
package.json:
"test:jest": "jest ./src",
"e2e:pptr": "npm run dev & jest ./tests",
"e2e:cypress": "npm run dev & cypress run",
"e2e:cypress:browser": "npm run dev & cypress open",
...
"jest": {
"verbose": true,
"testEnvironment": "jsdom",
"transform": {
"^.+\\.svelte$": [
"svelte-jester",
{
"preprocess": true
}
],
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"moduleFileExtensions": [
"js",
"ts",
"svelte"
],
"setupFilesAfterEnv": [
"#testing-library/jest-dom/extend-expect"
]
}
WHen I run npm run test:jest it still runs all tests. including cypress and ./tests/*.spec.js files. Its suppposed to just run tests under ./src which are my unit tests.
puppeteer tests are in ./tests/*.spec.js and cypresss are under ./cypress/*
So I needed to add --rootDir <path> to limit it.
"test:jest": "jest --rootDir ./src",
There is a simple question I cannot find an answer to.
When using:
Node 17 + Typescript
ESM ("type": "module" in package.json)
Can I implement mock for one function only? or module?
If so, can I get an example?
No matter what framework you use.
thanks!!
package.json:
{
"test": "node --experimental-vm-modules ./node_modules/.bin/jest --bail --colors --coverage --detectOpenHandles --forceExit --verbose",
"jest": {
"preset": "ts-jest/presets/default-esm",
"transform": {
".ts": "ts-jest"
},
"testEnvironment": "node",
"moduleFileExtensions": [
"ts",
"js",
"json"
],
"transformIgnorePatterns": [
"<rootDir>/node_modules/"
],
"globals": {
"ts-jest": {
"useESM": true
}
}
}
}
Jest.spy gives me an error: cannot assign to read-only property I tried using Sinon too, and I got: es modules cannot be stubbed
I'm very confused about how to setup the config file and which configs/plugins I should use.
I have a React project that uses Typescript, Jest and React hooks.
I know I need to install:
eslint
prettier, eslint-config-prettier, eslint-plugin-prettier
eslint-plugin-import
As for the Airbnb config, I'm not sure whether I need to install:
eslint-config-airbnb, eslint-plugin-react, eslint-plugin-jsx-a11y
or
eslint-config-airbnb-base
It doesn't seem like either of these support Typescript, so it seems I also need to install:
#typescript-eslint/eslint-plugin, #typescript-eslint/parser
And for Jest, I need to install:
eslint-plugin-jest
I'm not sure about React hooks. Do I need to install anything additional here or do one of the other packages include support for it? I see I have the option of installing:
eslint-plugin-react-hooks
Is that required?
Now, for the config file there are two areas I'm concerned with: extends and plugins.
I see that a few of these packages can be extended with /recommended. Should I use any of these? What should the extends section be? I've seen examples where it sets it as:
{
"extends": ["airbnb-base", "plugin:prettier/recommended"]
}
While I've seen other examples that use:
{
"extends": ["airbnb", "prettier"]
}
And another example that uses:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
What about the other Typescript, Jest and React Hooks plugins? For example, eslint-plugin-jest suggests adding "plugin:jest/recommended" to the extends. Will that conflict with any of the others? I see I could also add "plugin:#typescript-eslint/recommended" and "prettier/#typescript-eslint". Should they be included too?
For the plugins section, do I just list each eslint-plugin-.... package that I installed?
Here's an example, please let me know how this looks:
Installed packages
#typescript-eslint/eslint-plugin
#typescript-eslint/parser
eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
prettier
Config file:
{
"extends": [
"airbnb",
"plugin:#typescript-eslint/recommended",
"plugin:jest/recommended",
"plugin:prettier/recommended",
"plugin:react/recommended",
"prettier",
"prettier/#typescript-eslint"
],
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint",
"import",
"jest",
"jsx-a11y",
"react",
"react-hooks"
],
}
Thought I'd come back an answer this. Here's my final configuration that works:
module.exports = {
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"extends": [
"airbnb",
"plugin:#typescript-eslint/recommended",
"plugin:import/typescript",
"plugin:jest/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier",
"prettier/#typescript-eslint",
"prettier/react"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"jsx": true,
"sourceType": "module",
"useJSXTextNode": true
},
"plugins": ["#typescript-eslint", "import", "jest", "react", "prettier"],
"rules": {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
"allowExpressions": true,
"allowTypedFunctionExpressions": true
}
],
"#typescript-eslint/explicit-member-accessibility": "off",
"import/no-extraneous-dependencies": 0,
"react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
"react/prop-types": [0]
},
"settings": {
"react": {
"version": "detect"
}
}
}
I have been struggling to debug my server side code that is compiled with webpack. I am using VS Code which has a great built in debugger which would be amazing to connect to. My webpack config is pasted bellow. I have tried many of the techniques mentioned in the posts here on stackoverflow but I seem to only find solutions for dev servers used for frontend frameworks like vuejs or a create-react-app server. This is for an expressjs server.
const nodeExternals = require('webpack-node-externals')
serverConfig = {
entry: ['babel-polyfill', './src/server/index.js'],
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
optimization: {
minimize: true
},
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: 'babel-loader' }
]
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "false"
})
]
}
I have already tried this:
npm-script for debugger
"debug": "node --inspect--brk=9229 server.js"
With the VS code debugger script (and variations of it)
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "debug"
],
"port": 9229
}
Any help would be much appreciated! I've been missing out on debugging and getting very tired of console logs. Thanks!
I recently switched from Mocha to Jest. Everything works fine except the watch mode which always runs all tests (not only tests related to uncommited files as it says in the docs). I've searched the docs and with google but I haven't found any information on this issue.
My jest config is
"jest": {
"coveragePathIgnorePatterns": [
"/node_modules/",
"/generated/",
"/mock/",
"/tools/",
"/transactions/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"resetMocks": true,
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
"\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/tools/setupTest.js"
},
The setupTestFrameworkScriptFile only contains one row:
require('babel-polyfill');
Babelrc:
"env": {
"test": {
"plugins": [
"rewire",
"transform-class-properties",
"transform-es2015-modules-commonjs"
],
"presets": [
"es2017",
"react",
"stage-0",
"es2015"
]
}
}
I start the tests with jest --watch and it prints the message "Determining test suites to run" but then all tests are run even when no files are uncommited.
I'm on windows 7 and I run the command in powershell. Node version: v6.9.1
Jest versions: "babel-jest": "20.0.3", "jest": "20.0.4"
In all honesty, I'm guessing, but try using testPathIgnorePatterns in addition to coveragePathIgnorePatterns.
You need a git repo to run jest -o (jest --watch implicitly uses it).
From the docs:
Run tests related to changed files based on hg/git (uncommitted files):
jest -o