enzyme

问题 Most of the components looks like as follows: import React, { Component } from "react"; import { withTranslation } from "react-i18next"; class XYZ extends Component { constructor(props) { super(props); this.state = { }; } ..... ..... render() { const { t } = this.props; return ( ..... ); } } export default withTranslation()(XYZ); or, like below, in case of function components: export const XYZ = withTranslation()(({ t, ...props }) => { .... return ( ..... ); }); I wanted to use enzyme shallow

问题 I have the following react component class: import React, { Component } from "react"; import { withTranslation } from "react-i18next"; class XYZ extends Component { constructor(props) { super(props); this.state = { }; } ..... ..... render() { const { t } = this.props; return ( ..... ); } } export default withTranslation()(XYZ); When I am trying to unit test this component and mount this component using enzyme, I am getting following error: This is what I am trying to do: const wrapper = mount

问题 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 I'm struggling to write the unit test for clicking my button. Here is the component's code (just the render function): render() { const { navigation } = this.props; return ( <View style={styles.container}> <Button raised title={strings.painButtonTitle} buttonStyle={styles.painButton} titleStyle={styles.title} onPress={() => navigation.navigate("QuestionsScreen")

问题 Writing unit testing in react using jest and enzyme. While checking with a component state , it throws an error "ReactWrapper::state() can only be called on class components ". import React from 'react'; import { mount } from 'enzyme'; import expect from 'expect'; import CustomerAdd from '../CustomerAdd' import MUITheme from '../../../../Utilities/MUITheme'; import { ThemeProvider } from '@material-ui/styles'; describe('<CustomerAdd />', () => { const wrapper = mount( <ThemeProvider theme=

问题 I am new to testing and using Enzyme and Jest to write very simple tests. I just want to check whether the component renders or not. However, (I guess) because my component uses useContext hook, test case automatically returns undefined for all values come from the Context. In component: const { count, setCount } = useContext(Context); Test case: it('should render', () => { const component = shallow(<MyComponent />); const wrapper = component.find('myClassName'); expect(wrapper.length).toBe(1

问题 I am new to testing and using Enzyme and Jest to write very simple tests. I just want to check whether the component renders or not. However, (I guess) because my component uses useContext hook, test case automatically returns undefined for all values come from the Context. In component: const { count, setCount } = useContext(Context); Test case: it('should render', () => { const component = shallow(<MyComponent />); const wrapper = component.find('myClassName'); expect(wrapper.length).toBe(1

问题 I'm writing an app using React Native and Redux. I am designing a login form and want to test the components handle submit function. Within the handleSubmit() functions several actions should be dispatched to Redux. Let me give you the handleSubmit() functions code and the tests for it. First the function itself: handleSubmit = (values, formikBag) => { formikBag.setSubmitting(true); const { loginSuccess, navigation, setHouses, setCitizens } = this.props; apiLoginUser(values.email, values

问题 I'm testing React component with Mapbox, material-ui and custom styles. I use Jest + Enzyme for testing. I have problem: 'window.URL.createObjectURL is not a function'. I read similar questions: github.com/uber/react-map-gl/issues/210 github.com/mapbox/mapbox-gl-js/issues/3436 github.com/mapbox/mapbox-gl-js-mock and tried to add something but without success. Please, fix the issue. CodeSandbox 回答1: I had faced exactly same issue with my jest test suite. After some trial and searching, I was

问题 I have my button inside a component, which calls a method deleteData on click. How do I test the deleteData method is called on the button click in jest? <Modal.Footer> <Button id="trashBtn" onClick={this.deleteData}>Delete</Button> <Modal.Footer> deleteData() { {/* TODO :*/} } 回答1: you can do it like this: I suppose your button is in some component and iam using that component's name as ComponentName import React from 'react'; import { shallow } from 'enzyme'; import ComponentName from '.

问题 Using sinon and enzyme I wanna test the following component: // Apple.js class Apple extends Component { componentDidMount = () => { this.props.start(); Api.get() .then(data => { console.log(data); // THIS IS ALWAYS CALLED this.props.end(); }); } render () { return (<div></div>); } } If I just check endApy.called , it's always false. But wrapping it in a setTimeout will make it pass. Why console.log() is always called but not the props.end ? Why setTimeout fixes it? Is there a better way of