react-app-rewired, transformIgnorePatterns on Apollo Client 3 - jestjs

I have a React app with:
react-app-rewired
Apollo Client 3.5.5
I have an error when I try to use this import:
import { MockedProvider } from '#apollo/client/testing';
If I do console.log(MockedProviderenter code here) I got: undefined.
If in my jest config I add this:
"transformIgnorePatterns": ["<rootDir>/node_modules/.*"]
It works and I got the proper console.log: [Function: MockedProvider] { defaultProps: { addTypename: true } }
That's fine, yes, but I'm getting errors in other partes of the app, like:
SyntaxError: Invalid or unexpected token
4 | import Loader from 'react-loaders';
5 |
> 6 | import 'loaders.css/loaders.css';
So, what could I do?
I don't get how to apply that only for Apollo Client.

Related

How to use a dynamic import in a firebase cloud function using Javascript

How can I make this work without having the pre-deploy linter produce an error? If I disable the linter will it work on the cloud? (It works with my mocha tests).
async function() {
const { ChatGPTAPI } = await import('chatgpt');
}
29:32 error Parsing error: Unexpected token import
✖ 1 problem (1 error, 0 warnings)
Setting type: "module" in package.json produces error with the eslintrc.js

Need to test SwiperJS component and jest throws an error

this is what I have in my test file and have no idea how to fix it was searching everywhere could not find the solution
import { render } from '#testing-library/react';
import { ImageGallery } from '../index';
describe('Swiper has to render', () => {
test('Will Swiper render', () => {
const { asFragment } = render(<ImageGallery />);
expect(asFragment()).toMatchSnapshot();
});
});
having this in my test file
having an error
like that
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
SyntaxError: Unexpected token 'export'
1 | /* eslint-disable import/no-unresolved */
2 | import React, { useState, useCallback } from 'react';
> 3 | import { Swiper, SwiperSlide } from 'swiper/react';
| ^
4 | import ImageViewer from 'react-simple-image-viewer';
5 |
6 | import 'swiper/css/bundle';
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/components/ImageGallery/ImageGallery.js:3:1)

uuid is not a function while using jest

I have the following setup:
// uuid-wrapper.ts
import { v4 as uuidV4 } from 'uuid';
const uuid: () => string = uuidV4;
export { uuid };
// uuid-wrapper.spec.ts
import { uuid } from './uuid-wrapper';
describe('uuid-wrapper', () => {
console.log(uuid());
});
This works fine runtime, but it breaks in test. I'm trying to migrate to Jest 29 and I'm getting the following error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
^^^^^^
SyntaxError: Unexpected token 'export'
From uuid's repo I found a workaround which, after applied and my jest.config.js looks like this:
module.exports = {
moduleNameMapper: {
uuid: require.resolve("uuid"),
},
};
This gives me a different error but I still have no idea what it means:
> jest uuid-wrapper --no-coverage
FAIL src/uuid-wrapper/uuid-wrapper.spec.ts
● Test suite failed to run
TypeError: (0 , uuid_wrapper_1.uuid) is not a function
In fact, any function I export from this file (uuid-wrapper.ts) is not resolved. I have other tests that follow a similar pattern of reexporting packages but only this one breaks. I'm using uuid 9.0.0 and jest 29.1.2.
Edit: After a bit more testing, it turns out that anything I import into the test is "not a function".
uuid ships as an ESModule and Jest should not need to transform it. Add it to your transformIgnorePatterns in your Jest config:
module.exports = {
transformIgnorePatterns: ['node_modules/(?!(uuid))'],
}
Edit: After a bit more testing, it turns out that anything I import into the test is "not a function".
I had very similar symptoms once: builds and works as excepted, yet ...is not function in jest. The culprit was a circular dependency I accidentally introduced with my story. Maybe check for that.
As I suspected, the issue was in the naming. Renaming the files and directory to just wrapper solved the issue.

Jest Typescript error importing BabylonJS

I'm trying to launch a Jest test that just happens to import BabylonJS
I'm getting the error below.
export * from "./abstractScene.js";
^^^^^^
SyntaxError: Unexpected token 'export'
> 1 | import * as BABYLON from "#babylonjs/core";
| ^
2 |
3 | describe("Babylong tests2", () => {
4 | test("Should work please", () => {
When I created a CodeSandbox to test, it works GRRRR
https://codesandbox.io/s/jovial-cherry-svdug7?file=/test/babylon.test.ts
When I git clone and npm i && npm run test it fails with the above error
https://github.com/jtwigg/babylonjs-jest/
I'm having a lot of trouble getting traction with testing in a React app (failed with Mocha a million circular errors)
Any help would be appreciated.

Class is working properly in a NodeJS code but generates 'not a constructor' error in a Jest test

I am using fastest-validator package in a NodeJS Typescript project.
It is imported in a file validator.ts like so:
import Validator from "fastest-validator";
const v = new Validator();
...
export const mySchemaValidator = v.compile(mySchema);
The file is referenced in the project and works well. However, when I try to reference the file in the same way in a Jest test file, that looks like
import {mySchemaValidator} from "../validator";
by running jest I get the error
● Test suite failed to run
TypeError: fastest_validator_1.default is not a constructor
4 | var fastest_validator_1 = require("fastest-validator");
jest is using ts-jest and the configuration is
module.exports = {
transform: {
"^.+\\.tsx?$": "ts-jest"
},
testMatch: [
"**/*.test.ts",
],
};
How can I correct this issue?

Resources