Questions tagged [react-testing-library]

Questions about testing React components with the react-testing-library utility.

React Testing Library is a lightweight library for testing components. This library is built on top of Testing Library, which can be used for a number of other frontend libraries/frameworks, such as , , and more.

Guiding Principle

The more your tests resemble the way your software is used, the more confidence they can give you.

The library tests on DOM Nodes, primarily using JSDOM/Jest rather than instances of React components

3635 questions
1
vote
0 answers

Test a page using v-calendar with Jest, Testing Library and Vue.js/Nuxt.js

I'm trying to test a page that uses v-calendar and I'm missing some nested elements that I can't query because there just not in the rendered DOM (I get: TestingLibraryElementError: Unable to find an element...). They're also not displayed when I…
Théo Lavaux
  • 1,364
  • 3
  • 22
  • 46
1
vote
0 answers

how to mock axios of apisauce

Trying to mock an API call which accessed by apisauce. basically API below retrieve list of some object, and I need to test this api call via jest here what I tried; TagApi: import { ApiResponse, ApisauceInstance } from 'apisauce' import { Instance…
TyForHelpDude
  • 4,828
  • 10
  • 48
  • 96
1
vote
0 answers

[Bug]: ReferenceError: Worker is not defined when testing AppRouter component #13003

This is initially raised on the FaceBook/Jest repo and I am reposting it here to see if the community has any solution for this when testing with Jest. https://github.com/facebook/jest/issues/13003
AAMCODE
  • 415
  • 1
  • 7
  • 20
1
vote
0 answers

React query still fetching queries even after setting retries to false for test cases using Jest / RTL

I am trying to set the query retries to false for my tests using Jest / RTL, I was reading https://tkdodo.eu/blog/testing-react-query It says specifying the options to: const queryClient = new QueryClient({ defaultOptions: { queries: { …
Sole
  • 3,100
  • 14
  • 58
  • 112
1
vote
0 answers

react-leaflet-draw edit control simulate onCreated using testing library

I am trying to unit test onCreated event handler of the React-leaflet-draw's Edit control component using react testing library/jest. I tried the following without any luck: test('Polygon draw functionality', async () => { const drawHandler =…
1
vote
1 answer

React Testing Library not rendering with correct props

I have a component: const TextWithIcons = (props: Props) => { const { cellText, isSubline, maxWrapLines, textFieldWidth, iconList, hasIconTooltips } = props const MAX_ICONS_TO_SHOW = 5 const icons =…
Demian Licht
  • 129
  • 3
  • 10
1
vote
0 answers

ReactJs - How to force hover to test styles on hover of material-ui (v5 +) components?

How to force hover to test styles on hover of material-ui (v5 +) components? for example on Button Notes: This componenent works as expected. I'm sure that it's not a duplicate. In Debug, the background-color value keep equals to my initial value…
1
vote
1 answer

Test Empty Component using React Testing Library

I'm testing my Login component which implements Microsoft authentication for login. I'm returning empty fragment from Login.js. How can I test this using React Testing library and jest? import { useEffect } from 'react'; import { msalInstance } from…
1
vote
2 answers

React Testing Library jest.fn() toHaveBeenCalled() not working

Component: const MyComp = ({ handler }) => { return }; Test: it('Calls the handler', async () => { const handler = jest.fn(); render(); const button =…
nick
  • 2,819
  • 5
  • 33
  • 69
1
vote
0 answers

Jest/testing-library cannot find content in nested components

I have the following Form component with two nested components (Input and Greeting): import React from 'react'; export default function Form() { return (

Form

Kingsley CA
  • 10,685
  • 10
  • 26
  • 39
1
vote
1 answer

Jest: TypeError: Cannot read properties of undefined (reading 'getFileName')

I recently started using the @testing-library/user-event library and I am facing a lot of issues. I am trying to test a textbox validation flow however I am getting the error TypeError: Cannot read properties of undefined (reading 'getFileName') …
Ayushi
  • 31
  • 1
  • 3
1
vote
1 answer

Memory leak or wrapped your action with act with jest and react-testing library

I'm testing an component who has 2 useEffect inside an component. Each fetch asynchronously some data. // Pour récupérer les types de Flux useEffect(() => { // AbortController permet d'avorter le fetch si le composant se unmount avant…
Lfrlulu
  • 11
  • 2
1
vote
0 answers

Jest `clearAllMocks` doesn't seem to "reset" a certain API call `beforeEach`

I am running into an issue where my tests inside a describe block aren't getting all API calls reset between tests. If I run an *.only test, then the expected fetch.mock.calls[i] index changes. I would have expected each test to have the same number…
Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
1
vote
1 answer

TypeError: router.back is not a function

I'm testing the next.js back route navigation. But I'm getting this error when running the test: The back function: const router = useRouter(); const handleClick = useCallback(() => { if (router) { router.back(); …
1
vote
1 answer

Unable to close React Bootstrap Modal when button is clicked - React Testing Library

I am using React Testing Library to test that a modal, from React Bootstrap, closes when the button is clicked. For some reason, I can't make the test pass, since the result of it keeps on showing the modal element. Here is my React Component: …