react-testing-library

问题 I'm using react-testing-library within a project of mine and am trying to write tests that validate in-app routing. e.g. testing that a button on the AccessDenied page brings you back to the Home page. I've been able to write these sorts of tests successfully for my App component because it defines all of the app routes. But if AccessDenied is one of those routes , how do I need to set up my tests to validate a button clicked there will route my back to Home? Here is a contrived example: App

问题 I have create a number input component, but when I try to test it everything works great, except from the onMouserEnter() , onMouseOver() , onMouserLeave() and onFocus methods. On the component and on browser, the state changes (as I use the useState hook to know whether onHover), but on the tests no. Basically the state changes, but the children components that are meant to be displayed when onHover, do not display. Note: When I use a second conditional to display something, the test is able

问题 I have create a number input component, but when I try to test it everything works great, except from the onMouserEnter() , onMouseOver() , onMouserLeave() and onFocus methods. On the component and on browser, the state changes (as I use the useState hook to know whether onHover), but on the tests no. Basically the state changes, but the children components that are meant to be displayed when onHover, do not display. Note: When I use a second conditional to display something, the test is able

问题 I'm trying to understand how to best test that react-router behaves as expected with @testing-library/react. The simplest test I can think of, is to verify that clicking a link changes the URL. I know that ideally I should test that clicking on a link renders a new component, but that adds a lot of boilerplate to the test. So here's my failing example: import { MemoryRouter } from 'react-router-dom'; import { render } from '@testing-library/react'; import { createMemoryHistory } from 'history

问题 I am using react testing library to create my test. import React, {useState} from 'react'; const Input = () => { const [state, setState] = useState(0); const onChange = (e) => { setState(e.target.value) }; return ( <div> <h1>{state}</h1> <input placeholder='type' type="number" value={state} onChange={onChange}/> </div> ); }; export default Input; My test: import Input from "./Input"; import { render, fireEvent } from '@testing-library/react' describe('test if render', ()=> { test('check

问题 I am using react testing library to create my test. import React, {useState} from 'react'; const Input = () => { const [state, setState] = useState(0); const onChange = (e) => { setState(e.target.value) }; return ( <div> <h1>{state}</h1> <input placeholder='type' type="number" value={state} onChange={onChange}/> </div> ); }; export default Input; My test: import Input from "./Input"; import { render, fireEvent } from '@testing-library/react' describe('test if render', ()=> { test('check

问题 Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); const ref = useCallback(node => { if (node !== null) { setScrollH(node.scrollHeight); setClientH(node.clientHeight); } }, []); return [scrollH, clientH, ref]; } } I want each time that it is called, it return my values. like: jest.mock('useClientRect', () => [300, 200, () => {}]); How can I achieve this? 回答1: Load the hook as a module. Then mock the

问题 I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones: const News = () => ( <div> <h1>News</h1> ... <FetchNextPageButton query={NEWS_QUERY} path="viewer.news" /> </div> ) const Jobs = () => ( <div> <h1>Jobs</h1> ... <FetchNextPageButton query={JOBS_QUERY} path="viewer.jobs" /> </div> ) const Posts = () => ( <div> <h1>Posts</h1> ... <FetchNextPageButton query={POSTS_QUERY} path="viewer.posts" /> </div> ) The thing

问题 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 react-testing-library if the element isn't found causing the test to fail before the expect function fires. How do you test for something not existing in jest using react-testing-library? 回答1: From DOM Testing-library Docs - Appearance and Disappearance

问题 I am pretty new to testing and attempting to write what should be a simple test for our project... test('Attempt Login', async () => { const submitHandler = jest.fn( ()=> console.log('hello')) const { debug, getByText, getByTestId, getByPlaceholderText } = render ( <Router> <LoginPage submitHandler={submitHandler} /> </Router> ) fireEvent.change(getByPlaceholderText("Enter Username"), { target: { value: "admin" } }); fireEvent.change(getByPlaceholderText("Enter Password"), { target: { value: