enzyme

问题 I have a search bar component which looks like: render () { const { onChangeTextInput } = this.props return ( <Form name="searchForm" ref={(ref) => { this.searchForm = ref }} > <TextInput noSpacing placeholder={t('search')} name="search" validate="text" icon={this.icon} onChangeTextCallback={() => { onChangeTextInput(this.searchForm.values) }} /> ) </Form> ) } } I am using a shallow render and jest to run a unit test to test the following scenario" User types a character in text input a

问题 I have a component which uses axios within componentDidMount to retrieve data from the server. When using Jest / Enzyme for unit testing the component, the tests fail with a network error. How do I mock componentDidMount so that the axios call to the server does not happen? The component in question uses React DnD and is a DragDropContext . class Board extends Component { componentDidMount() { this.load_data(); } load_data = () => { // axios server calls here } } export default

问题 Issue: I am running my tests with Jest and Enzyme when I came across this error when I was running my code on a different machine. When I run npm test which only runs jest --coverage --verbose it will get this error every time. However, this doesn't happen when I run it on my work lap top. What I'm trying to figure out is why this is breaking over the "{" token when I run my testing script. I've seen some people suggest that using babel-jest would help, but I don't believe that is the cause

问题 I have a react project and am trying to setup some tests Due to the following setup guides / issues: https://github.com/facebook/jest/issues/1353 , https://github.com/facebook/react/issues/7386 , http://facebook.github.io/jest/docs/tutorial-react.html#content , http://airbnb.io/enzyme/ I have installed the following dependencies: react-addons-test-utils 15.3.2 react 15.4.0-rc.4 react-dom 15.4.0-rc-4 jest 16.0.2 babel-jest 16.0.0 babel-preset-es2015 6.18.0 babel-preset-es2015-loose 7.0.0 babel

问题 I am fairly new with enzyme. I have two components under test. form.jsx const LoginForm = ({ style, handleSubmit }) => { return ( <form onSubmit={handleSubmit}> <Button type='submit'> Login </Button> </form> ); }; LoginForm.propTypes = { handleSubmit: PropTypes.func.isRequired }; I am using this component in another component as follows: Component.jsx export default class Login extends Component { constructor(props) { super(props); this.onLogin = this.onLogin.bind(this); } onLogin(event) {

问题 I have the following React component: class Form extends React.Component { constructor(props) { super(props); this.state = this._createEmptyTodo(); } render() { this.i18n = this.context; return ( <div className="form"> <form onSubmit={this._handleSubmit.bind(this)}> <input placeholder={this.i18n.placeholders.addTitle} type="text" value={this.state.title} onChange={this._handleTitleChange.bind(this)}></input> <textarea placeholder={this.i18n.placeholders.addDescription} value={this.state

问题 I'm building a React Native app with TypeScript. I'm doing my component tests using Jest and Enzyme. I'm also using React Navigation In my last question Brian explained to me how to correctly test the press of a button. My problem is that the buttons onPress prop may be undefined. Let me show you the code: export class HomeScreen extends Component<Props, object> { // ... navigationOptions and stuff handlePress = () => { this.props.navigation.navigate("QuestionsScreen"); }; render() { return (

问题 I'm trying to test if within my parent component its child component is correctly rendered when the state is updated through a simple boolean value. Below the parent component : class Parent extends Component { ... render() { const { ..., isReady } = this.state; const props = { ... }; return( <div className="container page-content"> { isReady ? <Child {...props} /> : <div id="loader-wrapper"> <div id="loader"></div> </div> } </div> ); } } My test is : beforeEach(() => { wrapper = mount(

问题 I have a serious problem with testing methods of my main component. My actual test after many retries still don't work and looks like this: describe('<App />:', () => { beforeEach(() => { wrapper = mount(<Provider store={store}><App /></Provider>); }); describe('Interaction:', () => { it('should call ArrowDown()', () => { const instance = wrapper.instance(); spy = jest.spyOn(instance, 'ArrowDown'); instance.forceUpdate(); wrapper.simulate('keyDown', {key: 'Arrow down'}); expect(spy)

问题 I'm trying to write a Jest unit test for a component that uses React.Suspense. Simplified versions of my component modules under test: MyComponent.js import React from 'react'; export default () => <h1>Tadaa!!!</h1>; MySuspendedComponent.js import React, { Suspense } from 'react'; import MyComponent from './MyComponent'; export default () => ( <Suspense fallback={<div>Loading…</div>}> <MyComponent /> </Suspense> ); Naïvely, in my first attempt, I wrote a unit test that uses Enzyme to mount