enzyme

问题 I've created a React component that loads an image and determines if the image loaded successfully or not. import React from 'react'; import PropTypes from 'prop-types'; import { LOADING, SUCCESS, ERROR } from '../helpers'; class Image extends React.Component { static propTypes = { onError: PropTypes.func, onLoad: PropTypes.func, src: PropTypes.string.isRequired, } static defaultProps = { onError: null, onLoad: null, } constructor(props) { super(props); this.state = { imageStatus: LOADING };

问题 I am trying to test a style attribute for a React component. What is the best way to get style params in the test? At this moment, my best option is to test if the HTML includes the string, but I think there is a better option. Case: it('Should render large image when desktop', () => { const dummyUrl = 'http://dummyUrl'; const wrapper = shallow( <MockedStore initialState={{ app: fromJS({ browser: { desktop: true } }), }} > <LandingHero bigImage={dummyUrl} /> </MockedStore> ); }); The

问题 everyone. I'm having weird issues with testing a state update after an async call happening in componentDidMount . Here's my component code: 'use strict'; import React from 'react'; import UserComponent from './userComponent'; const request = require('request'); class UsersListComponent extends React.Component { constructor(props) { super(props); this.state = { usersList: [] }; } componentDidMount() { request('https://api.github.com/users', (err, res) => { if (!err && res.statusCode === 200)

问题 I faced a problem with my jest+enzyme mount() testing. I am testing a function, which switches displaying components. Switch between components: when state.infoDisplayContent = 'mission' a missionControl component is mounted, when state.infoDisplayContent = 'profile' - other component steps in: _modifyAgentStatus () { const { currentAgentProfile, agentsDatabase } = this.state; const agentToMod = currentAgentProfile; if (agentToMod.status === 'Free') { this.setState({ infoDisplayContent:

问题 I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should be able to use spyOn to do this: spyOn. However, when I try this, I keep getting TypeError: Cannot read property '_isMockFunction' of undefined which I take to mean that my spy is undefined. My code looks like this: import React, { Component } from 'react'; import logo from './logo.svg';

问题 Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests. This is what I tried (and also doing it using jquery), but it didn't seem to trigger anything: import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // it finds it alright button.simulate('click'); // nothing happens 回答1: #1 Using Jest This is how I use the jest mock

问题 I'm using Enzyme with enzyme-to-json to do Jest snapshot testing of my React components. I'm testing shallow snapshots of a DateRange component that renders a display field with the current range (e.g. 5/20/2016 - 7/18/2016 ) and two DateInput components that allow selecting a Date value. This means that my snapshot contains the Date s I pass to the component both in the DateInput props and in a text representation it resolves itself. In my test I'm creating some fixed dates using new Date

问题 I have a react component(this is simplified in order to demonstrate the issue): class MyComponent extends Component { handleNameInput = (value) => { this.searchDish(value); }; searchDish = (value) => { //Do something } render() { return(<div></div>) } } Now I want to test that handleNameInput() calls searchDish with the provided value. In order to do this I would like to create a jest mock function that replaces the component method. Here is my test case so far: it('handleNameInput', () => {

问题 I am using enzyme+mocha+chai to test my react-redux project. Enzyme provides shallow to test component behavior. But I didn't find a way to test the router. I am using react-router as below: <Router history={browserHistory}> ... <Route path="nurse/authorization" component{NurseAuthorization}/> ... </Route> I want to test this route nurse/authorization refer to NurseAuthorization component. How to test it in reactjs project? EDIT1 I am using react-router as the router framework. 回答1: You can

问题 I recently wanted to test that some custom method gets conditionally called in the componentDidMount method of a React component. componentDidMount() { if (this.props.initOpen) { this.methodName(); } } I'm using Jest as my testing framework, which includes jest.fn() for mocks/spies. I've read that this would be fairly trivial to test with Sinon, by doing something like the following: sinon.spy(Component.prototype, "methodName"); const wrapper = mount(<Component {...props} />); expect(wrapper