In my .netcore app I upgraded my Typescript version from 2.4.1 to 3.2.4 and now I am receiving the error Cannot find name 'setImmediate' at compile time. The implementation I have below is basically straight from the Microsoft guide on pre-rendering.
export default createServerRenderer(params => {
const providers = [
{ provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
{ provide: APP_BASE_HREF, useValue: params.baseUrl },
{ provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
];
return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
const state = moduleRef.injector.get(PlatformState);
const zone = moduleRef.injector.get(NgZone);
return new Promise<RenderResult>((resolve, reject) => {
zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
appRef.isStable.pipe(first(isStable => isStable)).subscribe(() => {
setImmediate(() => { // <!-- error here
resolve({
html: state.renderToString(),
globals: {
}
});
moduleRef.destroy();
});
});
});
});
});
I saw that there was a bug raised for this, however it is marked as resolved and merged. I also tried installing the setImmediate package and importing that, however that didn't work either. Anyone know how to resolve this ?
Non webpack:
Installing npm install --save-dev #types/node and then importing import '#types/node'; at the start of the file resolved this issue for me.
Webpack:
If you are using webpack then this will not work. Instead npm install --save-dev #types/node node then you will have to:
Go into your .tsconfig and add 'node':
{
"compilerOptions": {
"types": [..., "node" ],
...
}
}
do not import '#types/node'; this is for the reasons stated here:
#types packages are stored in the #types directory but they must never be manually imported. Rather, you need to import the dependency they correspond to from where that dependency is installed. #types packages provide the type declarations for dependencies that do not otherwise provide them.
I just tried the solution using webpack, and I noticed that there is no need to npm install node, just install #types/node (and follow the rest of the instructions of course) and it will work perfectly :)
Related
I am trying to migrate my test from Cypress 8.7.0 version to Cypress 10.10.0 version. Installed the latest version and did the below settings, but getting below error.
Using below versions:
Cypress 10.10.0,
"#badeball/cypress-cucumber-preprocessor": "^11.4.0",
node v18.4.0,
#bahmutov/cypress-esbuild-preprocessor": "^2.1.5"
Expected to find a global registry (this usually means you are trying to define steps or hooks in support/e2e.js, which is not supported) (this might be a bug, please report at https://github.com/badeball/cypress-cucumber-preprocessor)
Because this error occurred during a before each hook we are skipping all of the remaining tests.
I have added the error handling in e2e.js file and support/index.js file but still could not resolve this issue. I have .env file which has the environment variable in my root location. Could someone please advise on this issue ?
//Detail error log:
Because this error occurred during a `before each` hook we are skipping all of the remaining tests.
at fail (tests?p=tests/cypress/e2e/login/loginBase.feature:964:15)
at assert (tests?p=tests/cypress/e2e/login/loginBase.feature:971:9)
at assertAndReturn (tests?p=tests/cypress/e2e/login/loginBase.feature:975:9)
at getRegistry (tests?
Cypress version : v10.10.0
//tests/cypress/e2e/login/login.feature
#regression
#login
Feature: Login to base url
Scenario: Login to base url
Given I go to base url
//step defintion:
tests/cypress/stepDefinitions/login.cy.js
import { Given, When, Then, Before, After, And } from "#badeball/cypress-cucumber-preprocessor";
When('I go to base url', () => {
cy.visit(Cypress.config().baseUrl);
})
// tests/cypress/support/index.js file
// Import commands.js using ES2015 syntax:
import './commands'
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false
});
//tests/cypress/support/e2e.js
// Import commands.js using ES2015 syntax:
import './commands'
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false
})
//.cypress-cucumber-preprocessorrc.json // add this file in project root location
{
"stepDefinitions": [
"[filepath].{js,ts}",
"tests/cypress/stepDefinitions/**/*.{js,ts}"
]
}
// cypress.config.js
const { defineConfig } = require('cypress')
const createBundler = require("#bahmutov/cypress-esbuild-preprocessor");
const addCucumberPreprocessorPlugin = require("#badeball/cypress-cucumber-preprocessor")
const createEsbuildPlugin = require("#badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;
const dotenvPlugin = require('cypress-dotenv');
async function setupNodeEvents(on, config) {
await addCucumberPreprocessorPlugin.addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
//webpack config goes here if required
config = dotenvPlugin(config)
return config;
}
module.exports = defineConfig({
e2e: {
baseUrl: 'https://bookmain.co',
apiUrl: 'https://bookmain.co/api/books/',
specPattern: "tests/cypress/e2e/**/*.feature",
supportFile: false,
setupNodeEvents
},
component: {
devServer: {
framework: "next",
bundler: "webpack",
},
},
});
// package.json
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"stepDefinitions": "tests/cypress/stepDefinitions/**/*.{js,ts}",
"cucumberJson": {
"generate": true,
"outputFolder": "tests/cypress/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
},
In cypress.config.js add the following:
const {dotenvPlugin} = require('cypress-dotenv');
module.exports = (on, config) => {
config = dotenvPlugin(config)
return config
}
This will resolve the issue.
I am using ts-jest with ESM imports on nodejs.
The problem is that my jest.mock is not working, it is not mocking.
import { jest } from "#jest/globals";
jest.mock("./helpers"); // I tried before or after import
import { fn } from "./helpers";
describe("SimpleTest", () => {
it("should work", () => {
console.log(fn); // => defined
console.log(fn.mockReturnValue); // => /!\ UNDEFINED, fn is not a jest mock.
});
});
My jest config:
export default {
preset: "ts-jest/presets/default-esm",
extensionsToTreatAsEsm: [".ts"],
globals: {
"ts-jest": {
useESM: true,
},
},
}
The command I use:
node --experimental-vm-modules --experimental-specifier-resolution=node $(yarn bin jest)
I am using node v16.13.2 and ts-jest 27.1.3
jest.mock works for CJS, but not for ESM.
There is a jest.unstable_mockModule and an opened PR to turn it into a stable API, but it's in limbo (Jest author lost motivation).
For more details:
issue jest.mock does not mock an ES module without Babel
PR feat(runtime): add jest.mockModule
Some valuable comments in the issue might help you find a partial solution.
It didn't work for me. I gave up on it and went a different route altogether.
This is a known issue (as mentioned in https://github.com/facebook/jest/issues/10025).
Basically, the issue is that Jest can't hoist the mock before all other imports as it does using babel (https://github.com/facebook/jest/issues/10025#issuecomment-920401080). Using a top-level await along with jest.unstable_mockModule worked for me.
Just to note the example using jest.unstable_mockModule:
import { jest } from "#jest/globals";
const mockFn = jest.fn();
jest.unstable_mockModule("./helpers", () => ({
fn: mockFn
}));
const { fn } = await import("./helpers"); // Needs to be after the mock is declared.
I am trying to use crypto.randomInt() Nodejs API in a project bootstrapped with create-react-app that uses Webpack 5. I have tried multiple options like this so far:
// webpack.config.js
module.exports = {
resolve: {
fallback: { crypto: require.resolve('crypto-browserify') },
}
};
And then, npm i crypto-browserify as recommended by the error message.
// Returns Uncaught TypeError: randomInt is not a function
const { randomInt } = import('crypto');
console.log(randomInt(4));
From some threads, I tried:
// package.json
...
"browser": {
"crypto": false
}
...
Still, no luck. I tried import {randomInt} from 'crypto-browserify'. This didn't work either.
What should I do to make this work?
I would like to run the following test with Jest. I have no babel-config or jest-config yet. How can I configure jest to use ES6 features like import/export?
index.js:
export const add = (a, b) => a + b;
index.test.js
import { add } from '.';
describe('add', () => {
it('adds a + b', () => {
expect(add(1, 2)).toBe(3);
});
});
Turns out it works just like described in the docs at: https://jestjs.io/docs/en/getting-started#using-babel
To use Babel, install required dependencies via yarn:
yarn add --dev babel-jest #babel/core #babel/preset-env
Configure Babel to target your current version of Node by creating a
babel.config.js file in the root of your project:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Note: Jest needs to have the same major version as the babel-jest package. I had Jest v23 and babel-jest v24 which lead to misguiding error messages.
So, I've tried following Jest's documentation on setting up Babel, including installing babel-core: 7.0.0-bridge.0 and such, but I've had no luck in getting it to work.
I've tried to dig through their issues on GitHub but many of the solutions there don't work for me, primarily because they are using a babelrc file where as I'm using babel.config.js, and due to Babel's incredibly hard to read documentation, I cannot for the life figure out how to convert what they are doing in rc files into the js equivalent.
Hopefully someone can provide a solution!
My configuration files are below as well as the error message I'm getting;
babel.config.js
module.exports = api => {
api.cache(true);
const presets = [
[
'#babel/preset-env',
{
targets: {
node: true,
},
},
],
];
return {
presets,
};
};
jest.config.js
module.exports = {
testEnvironment: 'node',
collectCoverage: true,
verbose: true,
};
Error Msg:
Test suite failed to run
tests/integration/mytest.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import request from 'supertest';
^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)