Questions tagged [testing-library]
Questions about testing JavaScript code with the Testing Library utilities
251
questions
0
votes
1
answer
18
views
Query HTMLElement for chiled element using test-id
After rendering a component I get a RenderResult object and the RenderResult. container object.
in this container HTMLElement I want to query for an element using a given test-id.
so I have:
const ...
1
vote
2
answers
49
views
TypeError: Cannot read properties of null (reading 'useState') while testing component with react testing library
I'm learning testing on react and react components with react testing library and jest. While trying to test a component that works when rendering the component it works with no issue, but when ...
0
votes
1
answer
33
views
Test is failing as the object is incorrect in React Testing Library
Component to test -
import { useState } from "react";
const UserForm = ({ onUserAdd }) => {
const [name, setName] = useState("");
const [email, setEmail] = useState("&...
-1
votes
0
answers
18
views
How to print only test summary in jest and testing-library?
Running jest results in summary of failed and passed tests like:
✕ displays no result message if they are no results (5101 ms)
✕ displays too many results message if they are too many results (5030 ms)...
0
votes
0
answers
26
views
Replacement for wait() in Testing Library
I've recently updated the version of testing-library in a react/typescript project. I have found that the following statement is no longer part of the package:
import { wait } from '@testing-library/...
0
votes
1
answer
26
views
waitFor in react testing-library not entered
I am writing a test for a react component. When I click on the component its content gets hidden.
Here is the code of the test:
it('Click to hide minitoc root', async () => {
const { app } = ...
1
vote
1
answer
52
views
Jest-dom TypeError: $toString is not a function , Typescript, React, Next.js
I've been trying to configure jest and @testing-library/jest-dom to work with my typescript/react/next.js website.
Every-time I run the test I run into this issue and Im not sure exactly what is ...
0
votes
0
answers
29
views
Run a test in React
I'm trying to run my test in a react project created with "npx create-react-app my-app --template typescript".
but I'm geting this error:
SyntaxError: Cannot use import statement outside a ...
0
votes
0
answers
41
views
Error: Uncaught [TypeError: createKeccakHash is not a function]
I am trying to use web3js external calls in jest test. Previously i was able to get data, but the error thrown was can not console response after the end of test something like this, although i was ...
0
votes
1
answer
27
views
What is the equivalent of toJSON in testing-library/react?
In @testing-library/react-native I have a method provided by render called toJSON which I use to compare the resulting output
const { toJSON } = render(<HocText>simple string</HocText>)...
0
votes
0
answers
43
views
The Testing Library's fireEvent.click() not working on my Vanilla JS app
Am trying to test if a <p class="output"> element value is incremented after clicking the element. The app app works fine when I run it in the browser and click the button because the ...
-1
votes
1
answer
44
views
How to read a button which contains text with asterisk in javascript
Can anyone please help me with the below statement
I am trying to get the element by text which contains asterisk
const readButton = test.getByText('Read the rules *');
1
vote
0
answers
67
views
React testing library: Uncaught [TypeError: Cannot read properties of null (reading 'disabled')]
I am trying to write a test case for the back button which does a history push to the respective page.
However, facing some weird Typeerror with my test case which I am not able to understand why.
The ...
0
votes
1
answer
34
views
which version of @testing-library/cypress is compatible with cypress version 9.5.3?
I am trying to install @testing-library/cypress with cypress@9.5.3 already installed in my project.
It gives me a could not resolve dependency error.
It expects cypress@^12.0.0
I cannot update the ...
1
vote
0
answers
26
views
Why is ref.current not getting set when running tests using react testing-library
test('test-1', async () => {
const Comp = () => {
const r = React.useRef(null);
React.useEffect(() => {
if (r.current) {
console.log(r.current);
}
});
...
1
vote
1
answer
41
views
How do I test a React Native Context that has an a sync call in useEffect
There are other questions similar but this is specific to React Native and I have a React Context which has a provider and the provider has a useEffect hook that calls an async function that would ...
2
votes
1
answer
105
views
Testing Library Unable to find an element with text
I'm using @testing-library to test a svelte component. In terminal tests fail when they seemingly shouldn't
Footer › Year in footer
...
0
votes
0
answers
22
views
testing-library/react-native error if component includes png
I'm trying to write unit tests to react-native component, everything works fine as long as it does not have SVG inside. If I comment it out, everything works flawless, however if I have it inside ...
0
votes
0
answers
75
views
How to copy/paste in @testing-library/user-event 14?
In @testing-library/user-event 13, it was sort of trivial with:
paste(element, text, eventInit, options);
However, in 14, copy and cut was added and past now requires some kind of pointer selection ...
0
votes
0
answers
12
views
pptr-testing-library getDocument returns empty object
For integration tests in a Firebase project i use the emulator to provide the backend simulation. Test framework is Jest (29), Testing-Library (13) and pptr-testing-library (0.7) as an adapter to ...
0
votes
1
answer
51
views
Grab region by its aria-labelledby text
I have this role="region" div which is has an aria-labelledby attribute mapped to a heading inside the div.
HTML
<div role="region" aria-labelledby="Year 1">
<...
3
votes
0
answers
77
views
Calling userEvent.setup() in beforeEach() - is it a good or bad pattern?
In a test suite that needs to call userEvent.setup() in multiple tests, sometimes I'll do the userEvent.setup() in a beforeEach and then just reference the same user var in multiple tests
let user: ...
0
votes
1
answer
31
views
Simulating a long press of mouse left button in JS with testing-library
I am writing an integration test and I need to click on an html object for longer than 0.5s.
In the same test I have been able to use userEvent to handle various keys' actions, like:
const user = ...
0
votes
0
answers
48
views
Manipulating Pinia store state in @testing-library/vue
I'm trying to migrate my tests from @vue/test-utils to @testing-library/vue but have run into a spot of trouble with Pinia stores.
In Vue Test Utils, I'm able to do something like this:
it('should ...
1
vote
0
answers
54
views
How can I reset the jsdom instance when using vitest in order to test a History-based router?
I'd like to do some integration testing of my svelte + page.js-based router using vitest, but I'm running into an issue where the jsdom instance only updates correctly once per test file.
In the ...
0
votes
0
answers
34
views
storybook mui 5 - listbox not found
I write test in storybook for my Select component. Which is basically styled Select from MUI ver. 5. I have trouble to access role="listbox" since it is outside root.
<div id="root&...
-1
votes
1
answer
61
views
Testing library: You called act(async () => ...) without await
I'm writing some react unit tests and I keep getting this warning in my console but I'm not sure if I'm actually doing anything wrong.
it('correctly returns postcodes found', async () => {
...
0
votes
1
answer
23
views
Why does query fail in separate `it` blocks of tests
I have a React SignUp component. I'm writing tests with Jest as a runner and testing-library to write tests.
The signup component code( Using materialize for styling) is :
import React, { useState } ...
0
votes
1
answer
76
views
How to use jest-dom as standalone in a webpage?
I want to use/run jest-dom matchers separately/standalone (not in a test, but in a webpage) like this:
import matchers from '@testing-library/jest-dom/matchers'
window.matchers = matches
This is what ...
0
votes
1
answer
127
views
Test antd dropdown with @testing-library/react
I'm struggling with test which would select some value from dropdown component (antd).
Here is component that I would like to test:
import React, { useState } from 'react';
import { Form, Select, ...
0
votes
1
answer
88
views
How to test screen orientation with jest and testing-library/react?
I wrote a test for a component in nextJs by testing-library/react and jestJs, and I checked "window.screen.orientation.type".
I got an error that "TypeError: Cannot read properties of ...
0
votes
0
answers
29
views
Breeze: Jest encountered an unexpected token
I want learn to testing react app (I'm using Breeze) and I installed
@testing-library/jest-dom
@testing-library/react
jest
And I wrote first test. I know that I need have expect and I has this but I ...
0
votes
2
answers
117
views
How to test which element has focus with React and testing-library
I am working on a react app using mainly functional components. This is all tested with the react - testing library. I would like to test the focus of some elements to show that after some ...
0
votes
0
answers
17
views
How to test position of element which has `position:sticky; top:0;` when scroll event is fired in wrapper element
I'm building table UI component.
Thead component has sticky prop which supports position: sticky when table has scroll.
And I hope to test thead component in this scenario.
If container of table is ...
0
votes
0
answers
58
views
React - Jest test failing - TestingLibraryElementError: Unable to find an element with the text
I've a jest test that is failing on addition of a new component to the page. The test is about showing of an error alert once error occurs. Code works in local environment but fails during commit.
...
1
vote
1
answer
138
views
How to grab a container when wrapping render call into act?
render utility of React Testing Library among other things returns a container, that can be used to manually query the constructed DOM snippet. However when render call is wrapped into an act utility (...
0
votes
0
answers
195
views
Vue Testing Library with NaiveUI
I'm using Vue 3, NaiveUI, Vitest + Vue Testing Library and got to the issue with testing component toggle on button click and conditional rendering.
Component TSample:
<template>
<n-button ...
0
votes
0
answers
127
views
Test grouped cells in ag-grid react with testing-library
I am having trouble testing grouped cells in ag-grid react with React-testing-library.
My Grid:
const MyGrid = props => {
const rowData = [
{
model: 'samsung',
name: 'My TV',
...
0
votes
0
answers
83
views
Cannot mock federated module within jest file in host application even with virtual mock
I am trying to mock a federated module within a test like so:
within my JS file:
// eslint-disable-next-line import/no-unresolved
import { EventBus } from 'federated-module/main';
within its ...
1
vote
1
answer
51
views
React-bootstrap Nabar.Offcanvas causing errors with Jest/testing-library tests
I am working with a navbar.offcanvas element for responsive navigation menus. I just ran my tests, which pass when I comment out the navbar.offcanvas element. I am using React-Bootstrap, Jest, and ...
0
votes
1
answer
412
views
getByText doesn't find element with the text
I am starting using jest to test simple component SysError.js in my React Native 0.68 app. SysError displays some message on screen when it is called (routed by react-navigation 6.x) and the jest test ...
1
vote
1
answer
418
views
jest and testing-library controlled input
I'm trying to apply a unit test in my custom input component
If I pass the value prop in the <Input /> in the render function, the test fails.
Does anyone know the reason?
In controlled ...
0
votes
2
answers
211
views
React Testing Library - Lazy Loading - Error act()
I have the following simple test file for the component. I based the test on this React documentation https://reactjs.org/docs/test-utils.html#act
import ReactDOM from 'react-dom/client';
import { ...
0
votes
1
answer
35
views
Difference between fireEvent.dblClick & fireEvent.doubleClick in testing library?
Question about 2 different methods exposed via fireEvent API in the react-testing-library.
fireEvent.dblClick
fireEvent.doubleClick
What's the difference? And is there a recommendation to use one ...
2
votes
2
answers
527
views
Angular unit test mock parent component on child component
I'm trying to test the child component, but it requires a parent component for its main functionalities.
How can I test the child component with a "mock" parent?
(Using Jest, Angular 14, ...
1
vote
0
answers
533
views
fireEvent.click with parameters
I have a radio button that when I click it calls a function with two parameters in the function (value and step), and when I make a test with testing librairy I would like that when I simulate the ...
0
votes
1
answer
64
views
TestCafe / Testing Library - Destructuring multiple selectors from one selector
I'm currently struggling to write a test using testcafe and testing library.
Because of the nature of the site, we can't use standard testing library role with name/label queries because our tests are ...
0
votes
0
answers
150
views
React testing library - statement not covered
I am trying to test CommonUI component but errorMessages are not covered in test. renderTextField passed to <Field id=givenLimit/>
I need help, trying to add test but no Idea what's wrong and ...
0
votes
1
answer
103
views
react testing library - test window.addEventListener('mouseout')
I have a modal component which will trigger when the users mouse leaves the window.
I have archived this via a useEffect hook.
useEffect(() => {
document.addEventListener('mouseout', (e) => {...
1
vote
0
answers
95
views
Testing if dispatch was called inside function of a custom hook
I have a custom hook written like so:
export default function useOrder(orderInfo) {
const [loading, setLoading] = useState(false);
useEffect(() => {
if (confirmOrderFailed) {
...