react-testing-library Questions
2
I have a component that fetches data asynchronously in componentDidMount()
componentDidMount() {
const self = this;
const url = "/some/path";
const data = {}
const config = {
headers: { "Con...
Faldstool asked 19/9, 2019 at 3:3
1
When writing unit tests with React Testing Library, we can access elements by their role with getByRole.
For example, if the element is heading, it has level option:
const headingNode = screen.getB...
Myocardiograph asked 4/1, 2023 at 15:49
1
Solved
Testing radio inputs with React Testing Library - no form control was found associated to that label
I am testing several radio inputs in my form using React Testing Library. Most of them have labels of yes/no so I cannot use findByLabelText.
The full error I am getting is: Found a label with the ...
Peal asked 3/1, 2023 at 20:30
2
Solved
How to cover the lazy load component in react testing library.
import React, {lazy} from 'react';
const ownerInfo = lazy(() => import('../abc'))
const compone = () => {
return <Suspense&...
Grotto asked 17/3, 2021 at 6:10
2
I'm testing a custom hook with react-testing-library which basically does this:
function useHook() {
const [state, setState] = useState();
const fetch = async () => {
const response = await...
Streptomycin asked 11/2, 2022 at 17:27
8
Solved
Current Working Solution
Using this html:
<p data-testid="foo">Name: <strong>Bob</strong> <em>(special guest)</em></p>
I can use the React Testing Library ge...
Protrusion asked 4/4, 2019 at 7:13
5
In enzyme you can check for the existence of child component like this:
expect(wrapper.find(ChildComponent)).toHaveLength(1)
What is the equivalent to this test in react testing library? All the...
Doorframe asked 3/2, 2020 at 14:41
3
I'm testing my react app with react testing library and jest.
And I want to know how to fetch element with 'name' attribute in react-testing-library.
For example, in the following page, is it possi...
Tigress asked 1/2, 2021 at 2:33
2
I have a component <MyComponent1> which returns:
return (<MyComponent2> <button aria-pressed="true">đź‘Ť</button> </MyComponent2>);
Now in my unit test for My...
Psychodiagnostics asked 12/4, 2022 at 23:0
3
Solved
I'm working on a React project that uses SASS (SCSS syntax) for styling, along with Jest for unit tests. I'm having trouble testing styling in my project. Here's a simple example:
In component.js (...
Peavy asked 2/11, 2020 at 0:50
2
Solved
In my current React project, I'm testing a component which includes, as child component, the Dialog component from Material UI.
It's supposed it has to run the onClose() function when the user pre...
Ellison asked 3/1, 2020 at 1:59
2
I have a button that displays different styles when mouse moves over it:
background-color: green;
&:hover {
background-color: red;
}
Here is my test:
fireEvent.mouseOver(button);
expect(b...
Lariat asked 18/9, 2018 at 0:25
2
I want to assert on a condition which I know will not be true immediately, but might be true after an async action, in which the test should fail.
Say I'm testing this counter component:
function C...
Klotz asked 24/6, 2021 at 15:48
2
Solved
I noticed that my first test take like 6 seconds to run, however, it is very simple. It checks whether the Card component renders the passed children successfully:
describe('Card component', () =&g...
Andrews asked 3/7, 2022 at 9:4
4
This is how my test case looks :
const renderCard = ({
onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
return render(
<Card title={title} onSubmit={onSubmit}>
<Button type="s...
Brockwell asked 5/6, 2020 at 13:15
2
Solved
I'm using react-testing-library and I have a custom render:
const customRender = (node, ...options) => {
return render(
<ThemeProvider theme={Theme}>
<MemoryRouter>{node}</Mem...
Ruelas asked 23/11, 2018 at 14:54
2
Solved
I'm building a React autocomplete component and testing it using Jest and React-testing-library.
I have two inputs. When input1(with autocomplete functionality) is in focus, clicking the Tab button...
Azores asked 23/10, 2020 at 0:59
2
Solved
I'm trying to use react-testing-library with React and Jest but one of my tests are failing and I think it has something to do with the regex on the className prop on the test file.
Below I have a...
Roxanneroxburgh asked 8/2, 2019 at 13:23
0
I'm new to React Testing Library. I wanted to test a login form that is located inside Login.tsx component.
`
const Login = () => {
useYupTranslation();
const dispatch = useAppDispatch();
con...
Radnorshire asked 15/11, 2022 at 12:0
6
How do I make expect(stuff).toHaveTextContent(text) pass only when the text matches exactly?
.toHaveTextContent("1") counts as a match if the text I'm testing is "100"
Dulles asked 8/7, 2021 at 3:24
4
Component:
const MyComponent = props => {
const {price} = props;
const result1 = useResult(price);
return (
<div>...</div>
)
}
Custom Hook:
export const useResult = (price) =...
Expositor asked 8/11, 2022 at 19:10
2
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, in...
Jazzman asked 9/6, 2020 at 7:46
3
Question:
I have multiple dropdowns and I am checking to see if any of them are open. How can i do this in React testing library? (I'm going through bunch of tabIndexes and checking through them)
I...
Advertent asked 23/9, 2020 at 23:53
1
I'm using https://github.com/testing-library/react-hooks-testing-library to test my component but not sure how to check if my component has been re-rendered after a state change in this test
const ...
Ezar asked 25/6, 2020 at 0:18
2
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.
<>
<AppBar
data-tes...
Ballonet asked 22/2, 2022 at 8:3
© 2022 - 2024 — McMap. All rights reserved.