enzyme

问题 From my understanding and from what I have read so far in various answers, not all lifecycle methods are supposed to be run with shallow rendering. Especially componentDidMount However, I notice that when I do beforeEach(function () { fakeComponentDidMount = sinon.stub(Component.prototype, 'componentDidMount'); fakeComponentDidMount.callsFake(function () {}); wrapper = shallow(<Component {...props} />); }); afterEach(function () { fakeComponentDidMount.restore(); }); it('calls

问题 I hope someone can point me in the right direction to test useRef in the component below. I have a component structured something like below. I am trying to test the functionality within the otherFunction() but I'm not sure how to mock the current property that comes off the component ref. Has anyone done something like this before? const Component = (props) => { const thisComponent = useRef(null); const otherFunction = ({ current, previousSibling }) => { if (previousSibling) return

问题 I hope someone can point me in the right direction to test useRef in the component below. I have a component structured something like below. I am trying to test the functionality within the otherFunction() but I'm not sure how to mock the current property that comes off the component ref. Has anyone done something like this before? const Component = (props) => { const thisComponent = useRef(null); const otherFunction = ({ current, previousSibling }) => { if (previousSibling) return

问题 I am trying to fix a failing test in my react-redux app. When I dive and dive again into my component, I expect to see the JSX within it. However, I don't see anything. Here is my component - const Dashboard = (props) => { if (props.isSignedIn) return ( <div className="dashboard"> <h1>Welcome</h1> </div> ); return null; }; const mapStateToProps = (state) => { return { isSignedIn: state.auth.isSignedIn }; }; export default connect(mapStateToProps, { signIn, signOut })(Dashboard); Here is my

问题 I've been working with tests in react, and I'm in a trouble with testing form inputs. FormInput component in register <FormInput data-test="form-input" className={`${errors.username && "input-error"}`} name="username" type="text" ariaLabel="Username" placeholder="Username" value={values.username} onChange={handleChange} onBlur={handleBlur} icon={ <FaUser size={"3rem"} color={theme.colors.formInputBorderColor} /> } /> This is FormInput component export const FormInput = React.memo(({name,type

问题 I have the following component: function MyComp(props) { const [items, setItems] = useState([]); useEffect(() => { loadItems(); }, []); async function loadItems() { const result = await axios.get(`https://example.com/api`); setItems(result.data); } return (<div>{items.map(item => ...)}</div>); } And this test produces the act warning: const items = { "data": [{"id": 1, "title": "Title1"}] }; axios.get.mockImplementationOnce(() => Promise.resolve(items)); const wrapper = mount(<MyComp />);

问题 I want to test a simple Material UI select form which uses a FormControl and is exported withStyles. My Test case is pretty simple, i want to assert for example that my component renders an child. I try the following assertion: expect(wrapper.find('InputLabel')).toEqual(true); However, this assertion fails simply because the InputLabel is wrapped inside WithStyles AND WithFromControlContext (see debug output) : <WithStyles(FormControl) id="my-control-id"> <WithStyles(WithFormControlContext

问题 I am trying to test a React component using Jest and Enzyme. I want to simulate a click event on a Button component which is inside a div with a specific class name. I can't retrieve the Button node. I have the following markup in my component <div className="settings"> <Button onClick={() => this.toggleSettingsModal(true)} buttonStyle={ButtonStyle.Primary}> Settings </Button> </div> I have tried const component = shallow(<MyComponent />); component.find(".settings[Button]").simulate("click")

问题 Right now a component that looks like this: class Notification extends Component { constructor(props, context) { super(props,context); } render() { return (<NotificationSystem ref="notificationSystem"/>); } } export default Notification; And my unit test is: it('should make react notification system referencable', () => { const wrapper = mount(renderComponent(Notification)); expect(wrapper.ref('notificationSystem').length).toEqual(1); }) My renderComponent is: function renderComponent

问题 I want to write snapshot test for my Footer component, but it throws error: You should not use <Link> outside a <Router> . Here is my code: import React from 'react' import renderer from 'react-test-renderer' import Footer from '../footer' it('Footer renders correctly', () => { const tree = renderer .create(<Footer />) .toJSON() expect(tree).toMatchSnapshot() }) I know this happens because Footer component uses Link from react-router-dom . In order to solve this problem I wrapped Footer