enzyme

问题 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=

问题 I am trying for the first time to use React context API to pass information from a main component to his grandchild component. So first I have created a context Here is the main component that define the context The parent component don't care about the context and is just here to create the grand child component And here is the child component that reads the context So far no problem. Everything works as expected. The ChildComponent have retrieve the context value. The problem comes when I

问题 I have the following parent component: import React, { Fragment } from 'react'; export class Parent extends Component { constructor(props) { super(props); this.state = { show: false, }; } onClick = () => { // working } render() { return ( <Fragment> <Child handleClick={this.onClick} /> </Fragment> ); } } I need to check if callback fired in Child component, onClick method will be fired in Parent component. I wrote such a test: test("check callback fire", () => { let mockFn = jest.fn(); Parent

问题 I have my react-router component such as : <Switch> <Route path="/abc" render={() => <ComponentTemplateABC component={containerABC} />} /> <Route path="/def" render={() => <ComponentTemplateDEF component={containerDEF} />} /> ... ... </Switch> I wish to test the routing to ensure the respective component is rendered for each route. However, I do not wish to use mount for testing the routing, only wish to use shallow rendering. Below is what my test looks like currently: test('abc path should

问题 I have recently wrapped my component in test with ThemeProvider. When I ran my tests it's throwing the following error 'Method “simulate” is meant to be run on 1 node. 0 found instead' Before wrapping it was working fine. How can I resolve this issue? I found many issues similar to this in GitHub and I tried all those ways still I'm getting the same error. The code before wrapping: test('handleSelect function called on option select', () => { const handleSelectSpy = sinon.spy(); wrapper =

问题 I am trying to test a React component and make sure that when its button gets clicked, the correct method gets invoked. However, when I try to run my test and try to spy on that method, I get the following message: Error: Cannot spyOn on a primitive value; undefined given How do I test that when a button is clicked the correct method is invoked? Thanks! sampleComponent.jsx: import * as React from 'react'; const SampleComponent = () => { const sampleMethod = () => { console.log('hello world');

问题 I'm using jest for writing test cases. One of my function uses uuid and due to which it is not a pure function. The code is something like this: const myFunc = () => { const a = uuid(); return a; } I'm writing my test case as : test('should return a unique id value', () => { const a = uuid(); expect(myFunc()).toEqual(a); }); Obviously it won't work as it will generate a unique Id every time. How can I write test case for such function. [EDIT] I don't want test the uuid function as it will

问题 I'm using jest for writing test cases. One of my function uses uuid and due to which it is not a pure function. The code is something like this: const myFunc = () => { const a = uuid(); return a; } I'm writing my test case as : test('should return a unique id value', () => { const a = uuid(); expect(myFunc()).toEqual(a); }); Obviously it won't work as it will generate a unique Id every time. How can I write test case for such function. [EDIT] I don't want test the uuid function as it will

问题 I'm testing a React component with Jasmine Enzyme shallow rendering. Simplified here for the purposes of this question... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponent has 2 instances of MyInnerComponent and I'd like to test the props on each one. The first one I know how to test. I use find with first ... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello

问题 I've got a component I'm testing with Enzyme that looks like the following: <RichTextEditor name="name" onChange={[Function]} value="<p>what</p>" focus={false}> <div className="rich-text-editor"> <div className="btn-group" role="group"> <StyleButton active={false} icon="fa-list-ul" label="UL" onToggle={[Function]} style="unordered-list-item"> // ... I'm trying to detect the presence of the StyleButton component there like so: mount(<RichTextEditor />).find('StyleButton[label="UL"]') But no