enzyme

How can I test react-native component with mocha + enzyme + chai when it's wrapped in a Provider component

由 被刻印的时光 ゝ 提交于 2019-12-08 10:44:12
问题 I'm using mocha, enzyme, chai and some mocking libraries to make the testing possible. So, the content of TestComponent.js is below, I configure the store and pass it to the provider, while DeskScreen is connected component: import mockery from "mockery"; import 'babel-polyfill'; import reactNativeSvgMock from "react-native-svg-mock"; mockery.enable(); mockery.registerMock("react-native-svg", reactNativeSvgMock); var DeskScreen = require( '../app/containers/DeskScreen/DeskScreen'); import

React/Redux Testing w/ Enzyme

由 不想你离开。 提交于 2019-12-08 06:53:08
问题 I'm learning how to test React/Redux components using enzyme. The component takes app-level state as props. When I run the test, I get the errors: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). TypeError: Cannot read property 'contextTypes' of undefined with my console.log of wrapper in the below test file logging as undefined . I know that there's something wrong with

React Native 0.56 + Enzyme + Jest + React Navigation: Enzyme crashes because of import statement

由 三世轮回 提交于 2019-12-08 06:24:20
问题 TL;DR: My tests crash, because of the following error linked to React Navigation: /path-to-app/react-native/myApp/node_modules/react-navigation/src/views/withNavigation.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 127 | } 128 | > 129 | export default withNavigation( | ^ 130 | connect( 131 | null, 132 | { loginSuccess } at ScriptTransformer._transformAndBuildScript (node

How to test a React component that update over time with Jest and Enzyme?

由 橙三吉。 提交于 2019-12-08 05:44:15
问题 I have this React Component export class Timer extends Component { constructor(props) { super(props); this.state = {i : props.i}; } componentDidMount(){ this.decrementCounter(); } decrementCounter(){ if(this.state.i < 1){ return; } setTimeout(() => { this.setState({i : this.state.i - 1}) this.decrementCounter()}, 1000); } render(){ return <span>{this.state.i}</span> }} And I want to express a test like this jest.useFakeTimers(); it('should decrement timer ', () => { const wrapper = shallow(

Enzyme async await mock function not being called

由 我怕爱的太早我们不能终老 提交于 2019-12-08 02:20:20
问题 I'm trying to test an async await function, however im getting an error. ● Should handle getGIF event › should handle getGIF event expect(jest.fn()).toHaveBeenCalledTimes(1) Expected mock function to have been called one time, but it was called zero times. I'm unsure how to test async await functions, so i was using this blog as an example https://medium.com/@rishabhsrao/mocking-and-testing-fetch-with-jest-c4d670e2e167 App.js import React, {Component} from 'react'; import logo from './logo

Testing JSX inside .map function using Enzyme

由 荒凉一梦 提交于 2019-12-07 18:56:55
问题 So say i have this table: <table> <thead> <tr> <th>cat name</th> </tr> </thead> <tbody> {cats.map(cat => { return ( <tr key={cat.id}> <td styleName="table-item">{ cat.name }</td> </tr> ); })} </tbody> </table> How do i go about testing the jsx inside the map function with enzyme? I am able to test the other parts of it fine, like so: describe('<CatsTable />', () => { const wrapper = mount( <CatsTable cats={cats} /> ); it('renders correctly', () => { expect(wrapper.find('table')).to.have

this.refs is undefined for shallow tests using enzyme on React native

由 故事扮演 提交于 2019-12-07 17:09:26
问题 I have a component which has 2 input text fields. In the componentDidMount() method I am calling this.refs.password.focus(); There is some amount of tricky business logic sitting inside my componentDidMount but while doing a shallow unit test on componentDidMount , I get error cannot access password of undefined I checked the instance of the shallow component and see that this.refs is undefined . My question is how can we set this through tests? Shallow has a second parameter which we can

is there another way to mock component's mapDispatchToProps when using Jest

由 ≯℡__Kan透↙ 提交于 2019-12-07 12:53:47
问题 I currently have a component like so: import React, { Component } from 'react'; import { connect } from 'react-redux'; import { getDataAction } from ' './my-component'; export class MyComponent extends { Component } { componentWillMount() { this.props.getData(); } render(){ <div> this.props.title </div> } } const mapStateToProps = (state) => ({ title: state.title }); const mapDispatchToProps = (dispatch) ({ getData() { dispatch(getDataAction()); } }); export default connect(mapStateToProps,

Test custom method on React component has been called, using Enzyme and Sinon

由 只愿长相守 提交于 2019-12-07 07:24:02
问题 I want to check that when a button is clicked on my component, it calls the method I have created to handle the click. Here is my component: import React, { PropTypes, Component } from 'react'; class Search extends Component { constructor(){ super(); this.state = { inputValue: '' }; } handleChange = (e) => { this.setState({ inputValue: e.target.value }); } handleSubmit = (e) => { e.preventDefault(); return this.state.inputValue; } getValue = () => { return this.state.inputValue; } render(){

React Native 0.56 + Enzyme + Jest + React Navigation: Enzyme crashes because of import statement

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-07 03:35:28
TL;DR: My tests crash, because of the following error linked to React Navigation: /path-to-app/react-native/myApp/node_modules/react-navigation/src/views/withNavigation.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 127 | } 128 | > 129 | export default withNavigation( | ^ 130 | connect( 131 | null, 132 | { loginSuccess } at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) at Object.get withNavigation [as withNavigation]
订阅 enzyme