enzyme

问题 How can I spy on a class property arrow function using Jest? I have the following example test case which fails with the error Expected mock function to have been called. : import React, {Component} from "react"; import {shallow} from "enzyme"; class App extends Component { onButtonClick = () => { // Button click logic. }; render() { return <button onClick={this.onButtonClick} />; } } describe("when button is clicked", () => { it("should call onButtonClick", () => { const app = shallow(<App /

问题 Using the enzyme-example-jest Github project I am able to clone the repo and run the tests: git clone https://github.com/lelandrichardson/enzyme-example-jest.git cd enzyme-example-jest yarn install yarn test However, I uncommented line 11 of Foo-test.js : expect(shallow(<Foo />).contains(<div className="foo" />)).toBe(true); So that the file now looks like this: import React from 'react'; import { shallow, mount, render } from 'enzyme'; jest.dontMock('../Foo'); const Foo = require('../Foo');

问题 I have a functional component as below const Input = () => { const [value, updateValue] = useState(""); return ( <input type="text" id="input" value={value} onChange={(e) => { updateValue(e.target.value); }} /> ); }; export default Input; and test as below const event = { target: { value: "Q" } }; input.simulate("change", event); expect(input.prop("value")).toBe("Q"); the problem is that simulation of the event is not updating state. I tried wrapper.update() as well but it is not working. you

问题 i want to mock handleClick event of my TodoForm component. TodoForm.jsx import React, { Component } from "react"; export class TodoForm extends Component { handleClick = () => { console.log("handle click is called"); } render() { return ( <div> <button onClick={this.handleClick}>Clik</button> </div> ) } } in TodoForm.test.js import React from 'react' import { mount, shallow } from 'enzyme' import { TodoForm } from "../TodoForm"; it("must call the mock function when button is clicked", () => {

问题 I am trying to test onChange for the following code: using Jest / Enzyme The test is passing but coverage does not change, any reason ? file.js <div className='tab-input-container'> <select className='shape-dropdown' onChange={this.handleChange} name='category' defaultValue={!this.props.defaultData.category.$.id ? 'default' : this.props.defaultData.category.$.id}> {categories} </select> file.test.js Am I missing something? On change is being called 4 times. Here is just one example it('should

问题 While I'm ultimately trying to write an Enzyme test for the flow in this react router example: https://reacttraining.com/react-router/web/example/auth-workflow import React from 'react'; import ReactDOM from 'react-dom'; import Enzyme, { shallow, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import { MemoryRouter, Route, Switch, Link } from 'react-router-dom'; const Home = () => <div>Home</div>; const MockComp = () => ( <div className="protected"> <nav>hi</nav>

问题 I am doing tests for a react component using jest and enzyme and haven't figured out how to test the onClose event from the material-ui Menu. Same should apply to other components but we can stick with the Menu for the sake of this question. Here it is my component: import { Menu, MenuItem } from "@material-ui/core"; export class ItemPreviewerPage extends React.Component<ComponentProps, ComponentState> { constructor(props) { super(props); this.state = { anchorEl: undefined, fieldsetMenu:

问题 When trying to use ezymes mount on a component that is rendering MaterialUI's Tooltip, there is an error stopping my tests: TypeError: document.createRange is not a function 回答1: To fix this I defined document.createRange in my ./src/setupTest.js if (global.document) document.createRange = () => ({ setStart: () => {}, setEnd: () => {}, commonAncestorContainer: { nodeName: "BODY", ownerDocument: document, }, }) 来源： https://stackoverflow.com/questions/51887552/jest-enzyme-document-createrange

问题 Hi I'm trying to test a react module that contains the code <img alt='avatar' src={require(`../../assets/${avatar}`)} /> which concats a path and a prop containing a file name received from the redux store. It renders fine but the test throws the error "Cannot find module '../../assets/' from 'UserProfile.js'" which sounds like it thinks the path is a module. The full code is as follows: The module import React from 'react' import PropTypes from 'prop-types' const UserProfile = ({name='',

问题 I am working on writing test cases for a project. I am writing the test for my Container. The container has a function which is as shown below: getContactDetails = (reqObject) => { app.outageCenterService.getContact(reqObject).then( response => { app.logger.getLogger().info('Below is the response...'); app.logger.getLogger().info(this.state.contactDetails); this.setState({contactDetails: response.contactDetails},()=>{}); if (this.state.contactDetails.isContactPresent) { this.setState({