Questions about testing JavaScript code with the Testing Library utilities
Questions tagged [testing-library]
282 questions
371
votes
13 answers
How do you test for the non-existence of an element using jest and react-testing-library?
I have a component library that I'm writing unit tests for using Jest and react-testing-library. Based on certain props or events I want to verify that certain elements aren't being rendered.
getByText, getByTestId, etc throw and error in…
SomethingOn
- 9,813
- 17
- 68
- 107
16
votes
1 answer
Unable to use getByRole on listitem with a specific name - RTL
My apologies If this is a duplicate question. I couldn't find an answer anywhere else.
Component:
- Pending tasks
rehman_00001
- 1,299
- 1
- 15
- 28
15
votes
0 answers
Next.js: Jest encountered an unexpected token. Jest failed to parse a file. Crashing due to dot ( .{color: red} ) before a className in CSS files
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel,…
Arslan
- 240
- 3
- 9
14
votes
1 answer
How to access text broken by multiple elements in Testing Library
here is my code example
12
votes
2 answers
How to test Material UI v5 components with sx props in @testing-library/react?
React Testing Library does not apply sx props of Material UI components during rendering.
For example, I specify properties to hide an element at certain breakpoints.
<>
Ihor
- 121
- 6
11
votes
1 answer
How to use Vue Testing Library with Nuxt.js?
I want to use Vue Testing Library in my Nuxt.js app. But straight after installing the package, launching a test triggers this error:
'vue-cli-service' is not recognized as an internal or external
command, operable program or batch file.
This is…
drake035
- 3,955
- 41
- 119
- 229
10
votes
1 answer
React-testing-library getByRole is performing extremely slowly
We have noticed that our unit tests are performing very slowly and the culprit seems to be getByRole for querying for button elements etc. Here is an example of a query that was giving us problems today:
userEvent.click(screen.getAllByRole('button',…
FlinnBurgess
- 101
- 1
- 6
9
votes
2 answers
Testing react components and getting elements by className
Im wondering if putting new class name into html component only for readability and tests is ok.
Let's say we have this situation:
class ComponentOne extends React.Component {
render(){
mhan
- 121
- 1
- 2
- 5
9
votes
2 answers
How can I test the content in ag-grid using testing-library?
I am trying to write a few simple tests that the headers and data I want to render are showing up as expected. I created a repo - https://github.com/olore/ag-grid-testing-library to reproduce. The table looks as I would expect when opened in a…
olore
- 4,687
- 3
- 28
- 40
8
votes
1 answer
How to test React Router V6 Outlet using @testing-library/react
I have a component that I am using in React Router v6 for managing private routes, that does some checks on an auth token, and will either render the Outlet component or will redirect to a login page.
I have -
import { Outlet } from…
andy mccullough
- 9,070
- 6
- 32
- 55
8
votes
2 answers
Testing next.js title using next/head with jest and react-testing-library giving false positives
I have started using Next.js in my newest project and I would like to implement some tests for the pages.
I have created a _document file where I set up all of the meta tags which I want to use, including the title of the…
devvvyloper
- 101
- 1
- 4
8
votes
1 answer
Testing svelte components with svelte/store
When testing svelte components, using jest & @testing-library/svelte, the state is shared between tests, is there away to tear down after each test so i have more isolated unit tests.
store/theme
import { writable } from "svelte/store";
export…
Joe Warner
- 3,335
- 1
- 14
- 41
7
votes
1 answer
React Testing Library: UserEvent.type not working
Problem: UserEvent.type is not working. I have a simple test where I get the textbox, which works, but when trying to type in that textbox, the text does not display.
Most of the solutions I have seen to problems similar to this is to await the…
AAMCODE
- 415
- 1
- 7
- 20
7
votes
1 answer
Errors when updating @testing-library/user-event to v.14
I was following all the instructions for the newest version of @testing-library/user-event.
BEFORE:
test('request support action',() => {
render(
jake-ferguson
- 315
- 3
- 11
- 32
7
votes
2 answers
React testing-library Be sure to await previous act() calls before making a new one
I write a test for a seletion and I get this warning. In my test I'm waiting for the end of the act. Why I get this error?
Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making…
Andre Bongartz
- 101
- 1
- 1
- 8