enzyme

问题 //Component import _ from 'lodash'; constructor(props) { super(props); this.onScroll = _.debounce(::this.onScroll, 100); } onScroll() { //some code } //Test it('onScroll', () => { const component = shallow(<Component />); component.instance().onScroll(); //Dosn't call method }) I use enzyme for render component, and lodash for debounce. How to call component.instance().onScroll() ? 回答1: TL;DR; use lolex to advance in time while mocking timers for testing _.debounce I was ready to describe

问题 Hi I am writing test for functional component using the jest and enzyme. and When I simulate a click then params(state of component using useState) of component change. and when state is changed then useEffect call and in useEffect I am dispatching some asynchronous actions with params after changed. So I want to test params with I am dispatching the action. for this I want to mock dispatch. How can I achieve this ? Anyone can help me, thanks in advance. Below I am sharing the code. component

问题 I am trying to test my redirect buttons in my application with enzyme. I am unsure how exactly to do this, but I assumme that I just have to do a 'click' event on the button that is wrapped in a <Link> . (I have named it takeMeToB). See below : import React from 'react'; import Enzyme, {mount} from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import {BrowserRouter as Router, Link, MemoryRouter, Route, Switch} from 'react-router-dom'; import {createMemoryHistory} from "history";

问题 I'm totally lost trying to test a simple form made with React, how do I know if the submit button is working? After some research I thought that the way to do it is to make a mock function and then check if it was called but I'm pretty sure I'm doing it completely wrong. onObjSubmit(event){ event.preventDefault() ..... (fetch something) } render(){ return ( <form id="myForm" onSubmit={event => this.onObjSubmit(event)}> <input type="text" id="name" /><br /> <input type="text" id="last_name" />

问题 I am trying to perform some unit testing on my existing react application with Jest and Enzyme. I am totally new to this stuff and accurately I do not know how to approach such test scenarios. I know that to test API request calls I have to perform some "mocking", but how should I write the test for that?. What will be the steps that needs to be followed? Following is the code snippet I am looking to test. Home.js import React,{Component} from 'react' import axios from 'axios'; import {Link}

问题 I have the following : import {shallow} from "enzyme" const wrapper = shallow(<SampleComponent/>); how do I see the contents of wrapper? 回答1: You can use wrapper.debug() to get a string representing the wrapper element, like in: import {shallow} from "enzyme"; const wrapper = shallow(<SampleComponent/>); console.log(wrapper.debug()); 回答2: import {shallow} from "enzyme"; const wrapper = shallow(<SampleComponent/>); console.log(wrapper.html()); 来源： https://stackoverflow.com/questions/50050675

问题 import { logout } from '../../actions/user.actions'; const Logout = () => { useEffect(() => { Router.push('/any'); }, []); }; Test File afterEach(() => { jest.clearAllMocks(); }); afterAll(() => { jest.resetAllMocks(); // clear all the mocks. }); it('Should check the route', () => { const wrapper = mount(<Logout />); expect(wrapper.find('LoadingMessage')).toBeTruthy(); expect(useDispatch).toBeCalledTimes(1); const mDispatch = useDispatch(); expect(mDispatch).toBeCalledWith({ type: 'USER

问题 I have a div that onMouseOver and onMouseLeave toggles a child div as a dropdown. I want to test the hover event using enzyme. The relevant code for the component is: <div className="search-category" onMouseOver={() => toggleDropdown(true)} onMouseLeave={() => toggleDropdown(false)}> <div className="search-type"> ... </div> {dropdownShown && <SearchMenu searchSections={searchSections} dispatch={dispatch} />} </div> The relevant test code is ... it('should toggle search type dropdown on mouse

问题 Codesanbox link - includes working component Child2.js and working test Child2.test.js Child2.js import React, { useRef } from "react"; export default function Child2() { const divRef = useRef(); function getDivWidth() { if (divRef.current) { console.log(divRef.current); } return divRef.current ? divRef.current.offsetWidth : ""; } function getDivText() { const divWidth = getDivWidth(); if (divWidth) { if (divWidth > 100) { return "ABC"; } return "123"; } return "123"; } return ( <> <div id=

问题 Codesanbox link - includes working component Child2.js and working test Child2.test.js Child2.js import React, { useRef } from "react"; export default function Child2() { const divRef = useRef(); function getDivWidth() { if (divRef.current) { console.log(divRef.current); } return divRef.current ? divRef.current.offsetWidth : ""; } function getDivText() { const divWidth = getDivWidth(); if (divWidth) { if (divWidth > 100) { return "ABC"; } return "123"; } return "123"; } return ( <> <div id=