Category : react-testing-library

I have a simple component: counter + button (which increments counter after 1 second): const App = () => { const [counter, setCounter] = useState(0); const handleIncrement = () => { setTimeout(() => { setCounter(prevCounter => prevCounter + 1) }, 1000) } return ( <> <h2 className="counter" data-testid="counter-text" > {counter} </h2> <button onClick={handleIncrement} data-testid="btn-increment-async" > ..

Read more

Have a problem to simulate uploading the image file via unit testing with Jest and testing library in react. This is my JSX / component part of the code: <ChangeImgForm> <Image img={uploadedImg || avatarImg} alt="User profile" /> <ButtonsContainer> <UploadBtn> <FileUploadBtn handleFile={handleUploadFile} allowExtensions=".png,.jpeg,.webp" /> </UploadBtn> <RemoveBtn> <Button>Remove</Button> </RemoveBtn> </ButtonsContainer> </ChangeImgForm> This is a UNIT test that ..

Read more

// Custom Input component const Container = styled.div“; const InputBase = styled.div<{ width: string }>` display: flex; width: ${(props) => props.width}; height: 42px; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; border: solid 2px ${color.gray[200]}; background-color: white; &[data-focus="true"] { border: solid 2px ${color.gray[300]}; } &[data-disabled="true"] { background-color: ${color.background.original}; } `; const InputArea = styled.input` ..

Read more

I’ve created a very simple button component, which is importing another function. For testing (using jest and testing library) I have to mock the imported function: component import React from ‘react’ import { Button } from ‘semantic-ui-react’ import { useReviewButton } from ‘@my-project/util-review’ export const ReviewButton = () => { const { button } = ..

Read more