We have an app we recently updated from ReactNative 0.42 to 0.48. In that update we migrated to Jest for testing (from mocha/chai/enzyme). We are currently using Jest v21.1.0. When I run each test manually, they all pass without error. When I run just yarn jest I get this error:
/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2582
warnForStyleProps$1(nativeProps,viewConfig.validAttributes);
^
TypeError: Cannot read property 'validAttributes' of undefined
at setNativePropsStack$1 (/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2582:43)
at Component.setNativeProps (/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2550:1)
at AnimatedProps.callback [as _callback] (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1819:20)
at AnimatedProps.update (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1698:6)
at /scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:230:69
at Set.forEach (native)
at _flush (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:230:16)
at AnimatedValue._updateValue (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:939:1)
at TimingAnimation.animation.start._this9._animation [as _onUpdate] (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:906:8)
at TimingAnimation.onUpdate (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:345:6)
I cannot be sure, but we only have two components that deal with Animations and timing. We are using jest.useFakeTimers(); If I add a jest.runAllTimers(); I can get the error on individual component. The timing portions of the component look like this:
componentDidMount() {
Animated.timing(
this.state.fadeAnim, {
toValue: 1,
delay: 2000
}
).start();
}
And
<Animated.View style={{ opacity: this.state.fadeAnim }}>
...
</Animated.View>
It took quite some time, but I finally figured out what was going on. Basically, more of my tests were rendering the Animated view then I thought. I had originally included jest.useFakeTimers(); in my specific test for the component, but then I moved that into a setup file named test/jest_setup.js and then added this to my package.json file:
"jest": {
"setupFiles": [
"./node_modules/react-native/jest/setup.js",
"./test/jest_setup.js"
],
// rest of jest config
}
Now my errors are gone!
Related
I'm trying to create an API on Vercel which returns images, generated based on the request. I would like to use #vercel/og for this, because it can generate images from HTML, and it is very quick. However, it seems to require React, which seems entirely unnecessary for something serving no actual HTML at all.
I have an edge function in api/test.ts:
import { ImageResponse } from '#vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse({
type: "div",
props: {
children: "Hello, World",
style: {
backgroundColor: "black",
color: "white",
width: "100%",
height: "100%",
}
}
}, { width: 500, height: 500 });
}
This runs completely fine when deployed to Vercel, but when I use vercel dev it gives me these errors:
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/test: Error: socket hang up
node_modules/#vercel/og/dist/og.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import type { ReactElement } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import { ReactNode } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:14:11 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node`.
14 data: Buffer | ArrayBuffer;
~~~~~~
Found 3 errors.
There are two errors saying that #vercel/og and satori can't find React. Is there a way around this? I shouldn't need react for this, right?
I worked around the React-related errors and the inability to run .tsx edge functions without Next.js by installing #types/react and defining my own JSX function and using it without JSX syntax just in a .ts file.
function h<T extends React.ElementType<any>>(
type: T,
props: React.ComponentPropsWithRef<T>,
...children: React.ReactNode[]
) {
return {
type,
key: "key" in props ? props.key : null,
props: {
...props,
children: children && children.length ? children : props.children,
},
};
}
After this you can run it in Vercel deployment preview.
However, in vercel dev locally, I'm still getting the following error.
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/og: Error: socket hang up
I had also forced vercel CLI to use the newer TypeScript version with pnpm.overrides in package.json to solve some TypeScript parse errors I was getting.
In react native Project i installed react-native-vision-camera and react-native reanimated and then react-native-hole after running the project it gives me the error Frame Processor threw an error: Value is undefined, expected an Object
though camera is opened but it comes repeatedly the error, Please help to overcome the solution...i want to make the QR Code Scanner ...the react native QRScanner is getting deprecated please help for making QR Scanner in React Native ..Please help
I solved this issue by following these steps-
Change in your babel config-
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
// <-- this
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
npm start -- --reset-cache
add import 'react-native-reanimated'; at the top on index.js file
Im implementing tests framework (jest) in react native with testing-library/react-native, on an existing project.
When I run their example (intro) the app give the infamous error:
Jest did not exit one second after the test run has completed.
when I try to check it with the flag --detectOpenHandles, it shows that the library itself is the problem.
I have no config file for jest.
RN - 66.4
jest - 28.1.0
babel-jest - 26.6.3
jest-circus - 26.6.3
eslint-plugin-jest - 26.1.1
My problem was solved by this code:
beforeAll(done => {
done()
})
afterAll(done => {
// Closing the DB connection allows Jest to exit successfully.
mongoose.connection.close()
done()
})
I am trying to write unit tests for my Vue 3 app using web components.
I have Jest configured containing transform options:
// ...
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
// ...
I need to use isCustomElement which is now required at compilation time, so I’ve added options based on the proposed solution in Vue3 docs like I did in webpack. I played around with it in the transform and global options. And also tried adding it to my babel.config.
// ...
"transform": {
".*\\.(vue)$": ["vue-jest", {
compilerOptions: {
isCustomElement: tag => tag === 'my-custom-component'
}
}],
"^.+\\.js$": "babel-jest"
},
// ...
However it’s still throwing a Vue warn when running tests:
[Vue warn]: Failed to resolve component: my-custom-component.
Any ideas how to make isCustomElement work with Jest? I am at a loss as to what I need to set up to get rid of the console warnings and properly render the web components. In Vue 2 I just had to add them to setupFiles directly.
Is there a way to ignore an error with Jest?
I have an receive an error while importing a package and want to ignore the error so I can test the rest of my code.
in your test file add this outside the jest test or describe
console.error = jest.fn()
basically it will make jest mock the console.error function so it will pass the test.
You should add transformIgnorePatterns to your package.json:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"/node_modules/(?!react-native|*put library here*)"
]
},
in my jestsetup.js , please add
console.error = message => {
// throw new Error(message);
};
My jestsetup.js file
// Make Enzyme functions available in all test files without importing
import { shallow, render, mount } from 'enzyme';
global.shallow = shallow;
global.render = render;
global.mount = mount;
// Fail tests on any warning
console.error = message => {
// throw new Error(message);
};
Just use test.skip it.skip, xit or xtest instead of test or it to skip a specific test. Have a look at the docs.