Monthly Archive: January 2021

import 0

import "jest-dom/extend-expect" is deprecated

A warning/error printed in the console jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. If you do upgrade to @testing-library/jest-dom, make sure to...

TypeError: expect(...).toMatchImageSnapshot is not a function 0

TypeError: expect(...).toMatchImageSnapshot is not a function

  // Take screenshot with generateImage()   const screenshot = await generateImage();   // and compare it to the previous sceenshot with toMatchImageSnapshot()   expect(screenshot).toMatchImageSnapshot(); toMatchImageSnapshot is not existing naturally on expect object. You need to manually extend with this code:

React renders twice your component and hooks or useEffect 0

React renders twice your component and hooks or useEffect

From : https://stackoverflow.com/questions/58603209/react-hooks-render-twice It's an intentional feature of the StrictMode. This only happens in development, and helps find accidental side effects put into the render phase. We only do this for components with Hooks...

Jest in React Expected ref to be a function, a string, an object returned by React.createRef(), or null. 0

Jest in React Expected ref to be a function, a string, an object returned by React.createRef(), or null.

Expected ref to be a function, a string, an object returned by React.createRef(), or null. Code test('MultipleFormAggregator to prevent an invalid form submit two times in a row', () => {   const formAggregatorRef = useRef<MultipleFormAggregatorRef>(null);   const component = renderer.create(     <div>       <MultipleFormAggregator ref={formAggregatorRef} />     </div>,   );  (...) }); Solution Create a jig, dont use ref in your...

React jest typescript SyntaxError: Unexpected token 0

React jest typescript SyntaxError: Unexpected token

Solution Add "@babel/typescript" to your project as well as in the babel.config.js file : module.exports = {   presets: [     '@babel/preset-env',     '@babel/preset-react',     "@babel/typescript",   ],   plugins: [     "@babel/plugin-proposal-export-default-from",   ], };

Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled 0

Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled

SyntaxError: C:\dev\mx4d-ui\src\js\component\multiple-form-aggregator.tsx: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (5:8): 3 | import { log } from 'src/js/service/logger'; 4 | > 5 | export interface FormAggregatorClientInterface { Solution Install npm package @babel/plugin-proposal-export-default-from $...