Category : enzyme

recently upgraded jest from v16 to v26 and all of a sudden the moduleNameMapper doesnt work anymore this is the current config "moduleNameMapper": { ".(scss)$": "identity-obj-proxy", "^.+.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "mocks(.*)$": "<rootDir>/__mocks__/$1", "shared(.*)$": ["<rootDir>/app/shared/$1"] }, and this is the error i keep getting Configuration error: Could not locate module ../../shared/styledComponents mapped as: [ "/home/rog/code/client/app/shared//styledComponents" ]. Please check ..

Read more

When I am updating props of functional component in test case, it’s not triggering useEffect. However it’s updating props in myComp. Component Example: const myComp = ({userId, myAction}) => { useEffect(() => { myAction(userId); }, [userId]); return <div>Test</div> } Test case Example: ….. describe(‘Testing MyComp’, () => { it(‘should call myAction with userID’, () => ..

Read more

Hi I am trying to add jest to my existing application. Unfortunately I am not using any create-react-app,webpack, npm to install and bundle. React and ReactDOM from : https://unpkg.com/[email protected]/umd/react.production.min.js Enzyme from this site : https://gist.github.com/jonmbake/6362a9f54f57a4506057166aa5ec7027 In package json of enzyme modified the build script by adding "&& babel build -d babel" (which did compilation from ..

Read more

I am trying to understand how asynchronous testing works in enzyme. my View.tsx component renders after certain timeout.(timeout ensures in my case when animation is fully finished). In my test i tried to mount the parent component and was trying to write a test: is child component "ViewContent" was rendered. I am not sure how ..

Read more

I am trying to write enzyme test and would like to access the text of the following div. <div className="toolbar__contentInformation"> <div className="text smallfont ellipsis">Alex</div> <div className="text smallfont ellipsis">12</div> </div> test.js let component = React.createElement(App}); let wrapper = enzyme.enzyme.mount(component); let val = wrapper.find(‘div.toolbar__contentInformation’) //how to access text = Alex ??? Source: Ask Javascript..

Read more

I have the following test code: import React, { useState } from ‘react’ const TestComponent = ({}) => { const [isEvenOdd, setIsEvenOdd] = useState(‘Even’) const isEven = (name) => name === ‘Even’ const doTheChange = (e) => { e.preventDefault() return (isEven(isEvenOdd) ? setIsEvenOdd(‘Odd’) : setIsEvenOdd(‘Even’)) } return ( <> <Button onClick={doTheChange} id="even-odd-button" message={`This number is ..

Read more

I have a functional React component that listens to hash changes and calls a function accordingly: const Component: React.FC = () => { function handleHashChanged() { } useEffect(() => { window.addEventListener(‘hashchange’, handleHashChanged); return () => window.removeEventListener(‘hashchange’, handleHashChanged); }); }; This works fine normally but not when running tests (using enzyme). I’ve mounted the component on ..

Read more

export function getNavHeight() { const merchantNav = document.getElementById( ‘merchant-header-main-wrapper-internal’ ) const dw2Nav = document.querySelector(‘.cw_navbar__mainnav’) let navHeight = 72 // Consumer header is fixed to 72 if (merchantNav) { navHeight = merchantNav.offsetHeight } if (dw2Nav) { navHeight = dw2Nav.offsetHeight } return navHeight } The above block is the function I want to write a unit tests ..

Read more