bug: Tests Fail Using Basic Configuration (React Native/TypeScript) #85
Comments
|
What's your input file? |
Sorry, I don't understand. I'm just running |
|
Yes. It's a parsing error so I need a repro case. |
|
@kdy1 - I just put this together and was able to repro pretty quickly - https://github.com/therynamo/SWCJestRepro |
|
@therynamo I checked it but it does not have a file named |
|
@kdy1 - so sorry about that 🤦 - I forgot to commit my changes 😅 . Try pulling from |
|
It does not have the required file, namely |
|
@kdy1 - yeah - that file was just an example file name. The edit screen info test in the repo I just linked causes the same error. Were you able to pull down those updates I just pushed? Here is a link to the new file https://github.com/therynamo/SWCJestRepro/blob/master/components/__tests__/EditScreenInfo.test.tsx This test fails with the same error message. |
I need the file containing this line |
|
Also, I don't pull files using my dev machines because it's a risk. |
|
Yeah - that's the thing - there is no file containing that line. Which is the confusing part - the stack trace just indicates that there was an issue with
It will likely help if you can run this code, I'm not sure how you'd be able to debug this without it. This repo I linked above is one I just freshly created when you asked me for the https://reactnative.dev/docs/typescript What I did to create this repo: yarn global add expo-cli
expo init SWCJestRepro
# choose the option that has "tabs with typescript" (picture below)
yarn add -D babel-plugin-module-resolver @types/jest @testing-library/react-native @swc/core @swc/jestReference picture: Then create a Then add a Then create this test file with these contents: (Note: if you don't fork the repo - consider deleting the Alternatively - you can just fork the repo I made for us and for this issue. I understand that we have to be safe, especially when dealing with open source, but the repo I just created is about as bare bones as any React Native project can be. And I can't be sure that there isn't something going on with RN in this particular issue. I'm very invested in finding a way to utilize Let me know if you need any more information - happy to help where I can. |
|
I'm out for the night, but I wonder if it's something in Thanks again for looking into this! |
|
Actually it looks related to the react native preset dosentmatter/babel-plugin-const-enum#3 |
|
Oh, thanks! I'll extract the test case using github codespaces |
|
It seems like a bug of |
Hmm yeah - types should not be in a I'm investigating removing the EDIT: the latter effort was fruitless - ending in this error: |
|
Alright - so after I "patch" the /**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict
* @polyfill
*/
let _inGuard = 0;
/**
* This is the error handler that is called when we encounter an exception
* when loading a module. This will report any errors encountered before
* ExceptionsManager is configured.
*/
let _globalHandler = function onError(
e,
isFatal,
) {
throw e;
};
/**
* The particular require runtime that we are using looks for a global
* `ErrorUtils` object and if it exists, then it requires modules with the
* error handler specified via ErrorUtils.setGlobalHandler by calling the
* require function with applyWithGuard. Since the require module is loaded
* before any of the modules, this ErrorUtils must be defined (and the handler
* set) globally before requiring anything.
*/
const ErrorUtils = {
setGlobalHandler(fun) {
_globalHandler = fun;
},
getGlobalHandler() {
return _globalHandler;
},
reportError(error) {
_globalHandler && _globalHandler(error, false);
},
reportFatalError(error) {
// NOTE: This has an untyped call site in Metro.
_globalHandler && _globalHandler(error, true);
},
applyWithGuard(
fun,
context,
args,
// Unused, but some code synced from www sets it to null.
unused_onError,
// Some callers pass a name here, which we ignore.
unused_name,
){
try {
_inGuard++;
/* $FlowFixMe[incompatible-call] : TODO T48204745 (1) apply(context,
* null) is fine. (2) array -> rest array should work */
/* $FlowFixMe[incompatible-type] : TODO T48204745 (1) apply(context,
* null) is fine. (2) array -> rest array should work */
return fun.apply(context, args);
} catch (e) {
ErrorUtils.reportError(e);
} finally {
_inGuard--;
}
return null;
},
applyWithGuardIfNeeded(
fun,
context,
args,
) {
if (ErrorUtils.inGuard()) {
/* $FlowFixMe[incompatible-call] : TODO T48204745 (1) apply(context,
* null) is fine. (2) array -> rest array should work */
/* $FlowFixMe[incompatible-type] : TODO T48204745 (1) apply(context,
* null) is fine. (2) array -> rest array should work */
return fun.apply(context, args);
} else {
ErrorUtils.applyWithGuard(fun, context, args);
}
return null;
},
inGuard() {
return !!_inGuard;
},
guard(
fun,
name,
context,
) {
// TODO: (moti) T48204753 Make sure this warning is never hit and remove it - types
// should be sufficient.
if (typeof fun !== 'function') {
console.warn('A function must be passed to ErrorUtils.guard, got ', fun);
return null;
}
const guardName = name ?? fun.name ?? '<generated guard>';
function guarded(...args) {
return ErrorUtils.applyWithGuard(
fun,
context ?? this,
args,
null,
guardName,
);
}
return guarded;
},
};
global.ErrorUtils = ErrorUtils;I now get this error from You should be able to copy paste the fixed file without any types into whatever env you were using to reproduce this error. |
|
Also - I've filed a bug with the |
|
Just a heads up that I'm having the same issue. EDIT: The correct error (after setting up the config) |
|
@coelhucas It's an issue of your config |
|
I see there's no good solution for this so I thought I should share what I did to work around this issue. Since some of the file provided by the react-native libraries, for some ungodly reason have a module.exports = {
transform: {
'^.+/((@)?react-native)/.+\\.(js|jsx)$': 'babel-jest',
'^.+\\.(js|ts|jsx|tsx)$': '@swc/jest',
}
}I don't think this is a good solution, but it works and I've managed to achieve what I wanted (much faster test runs). |
It isn't actually typescript but rather flow and this is why even if the typescript parser is used for everything it fails. btw thanks for the solution |
|
Hello guys, I'm facing the same issue. I add this and the same error ocrrur. Can some one help me? here is my repository https://github.com/lucaslozz/imhere.git |
|
@lucaslozz Maybe it's |
|
@camilossantos2809 I try it and nothing changed.is There someway to ignore those files? |
|
@lucaslozz can you show the exact error you are getting? |
|
@ncpa0cpl it's the same error of the issue
` Test suite failed to run |
|
So the file on which it fails for you ( The only thing I can think of is that the actual file path is used to match against the regex rather than the import path, in which case the regex I've posted would not work on Windows, since Windows uses backslashes in filepaths and the regex was written for Unix systems that use regular slashes. This is just a guess tho, and I am unable to verify that since I do not have access to any Windows machine. You can try replacing the slashes to backslashes in that regex and see if anything changes. |
|
@camilossantos2809 I've tried and now it's working. Thanks for help me! |
|
For me this extra transform helped: It then compiles react-native flow files with babel-jest, and my own files with swc. On a vanilla React Native project created with their template, the result is actually slightly slower. Overall it looks like a better solution would be removing flow types before publishing the react-native npm packages: facebook/react-native#33426 (comment) |
|
@jzaefferer I wish you luck in convincing the facebook team to add a build step that will be necessary for this to RN project, I'd love to see them do that, it would help me a lot. In the project I am working on we have ~1.5k unit tests and it takes forever to complete, I will take anything that could speed it up by even a few percent. |
I have come to
@swc/jestbecause of the recentts-jestissues kulshekhar/ts-jest#1967 (Granted it could beJestit could bev8. Ultimately - I just wanted to move to SWC to get faster, more stable, and ultimately the most performant tests I can run).I am trying to use this package with a React Native app - and am running into issues after I resolve the one listed here. I have tried a couple of different
.swcrcconfigurations:And just a basic one from the example in the repo here:
jest/examples/react/package.json
Lines 33 to 51 in 4660359
The above works without a physical
.swcrcfile - which is what I'll opt for since our App wont be built using SWC yet (or maybe ever 🤷 Depends on the RN support in the future.)The issue I'm running into now - is very similar:
I haven't had any luck getting past this point and would LOVE some help troubleshooting how to move forward.
My current
jest.config.jstsconfig.json{ "compileOnSave": true, "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react-jsx", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext", "noImplicitAny": true, "noImplicitThis": true, "noUnusedLocals": true, "noUnusedParameters": true, "resolveJsonModule": true, "skipLibCheck": true, "baseUrl": "./", "paths": { "/* comment */": "a bunch of paths for app aliasing" }, "exclude": [ "**/__mocks__/**", "node_modules", "**/node_modules/**", "babel.config.js", "metro.config.js", "jest.config.js", "e2e", "ios", "android", "assets", "coverage", "dist", ] }babel.config.jsThe text was updated successfully, but these errors were encountered: