enzyme

So i have a particular problem, inside my react component i used commands like these: document.getElementById('modalsContainer').appendChild(recognitionProfileZoom); document.getElementById('modalsContainer').appendChild(categoryZoom); and: document.getElementById('cddoccategoryzoom').value; But these elements that were specified by ID don't exist in my component. How would one go about creating these objects on the tests? The code below would use these elements but it fails because they don't exist( the hideModal function utilizes the document.append from before ) describe(

I have react app was made by create-react-app using jest and enzyme for testing So how can i get the value of window.location.pathname inside my test file? This is my spec import React from 'react'; import MovieDetailsBox from '../../src/components/movie_single/MovieDetailsBox'; import { expect } from 'chai'; import { shallow } from 'enzyme'; import { movie_details } from '../../src/data/movies_details' import { empty_user } from '../../src/helper/sessionHelper'; jest.mock('react-router'); describe('Test <MovieDetailsBox /> Component', () => { let movie_details_props = { movie: {...movie

The npm run test works fine locally. However , travis insists that the build is failed and it shows the following log : react-test-renderer is an implicit dependency in order to support react@15.5+. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation No coverage information was collected, exit without writing coverage information /home/travis/build/abdennour/react-csv/node_modules/enzyme/build/react-compat.js:159 throw e; ^ Error: Cannot find module 'react-test-renderer/shallow' at Function.Module._resolveFilename (module.js:469:15) at

I have a minimum test react app with following component: import React from 'react'; import $ from 'jquery'; export default class App extends React.Component { componentDidMount() { console.log('componentDidMount', $('#helloDiv').length); } render() { return <div id='helloDiv'> Hello React! </div>; } } this works fine when loading it in browser (Chrome). The console.log() in componentDidMount() prints out 1 helloDiv element found However, if I run the test using mocha + enzyme + jsdom, the same console.log() in App component prints out 0: import React from 'react'; import { mount } from

The full error message: Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Portfolio)". Not sure why I'm getting this error in my Jest tests as my app is working and I can change my state with dispatch actions. index.js import React from 'react' import ReactDOM from 'react-dom' import { createStore, applyMiddleware, compose } from 'redux' import { Provider } from 'react-redux' import thunk from 'redux-thunk' import reducer from './reducer' import App from '.

I have a React component with a modal dialog (built using reactstrap , but others have reported similar problems with react-bootstrap and other types of modal components). Enzyme cannot find any of the components inside the modal, even though they render fine in the actual app. Minimal example: import React from 'react' import { Modal } from 'reactstrap' export default class MyModal extends React.Component { render() { return ( <div className="outside"> Some elements outside of the dialog </div> <Modal isOpen={this.props.modalOpen}> <div className="inside"> Content of dialog </div> </Modal> );

I have been working on a React app with a new team and the discussion came up around writing unit tests for components that trigger methods on window.scroll events. So, let's take this component as an example. import React, { Component } from 'react'; class MyComponent extends Component { componentDidMount() { window.addEventListener('scroll', this.props.myScrollMethod); } componentWillUnmount() { window.removeEventListener('scroll', this.props.myScrollMethod); } render() { return ( <div> <h1>Hello MyComponent!</h1> </div> ) }; }; export default MyComponent; As you can see, I am taking a

When I tested class component with enzyme I could do wrapper.setState({}) to set state. How can I do the same now, when I am testing function component with useState() hook? For example in my component I have: const [mode, setMode] = useState("my value"); And I want to change mode inside my test When using state from hooks, your test must ignore implementation details like state in order to properly test it. You can still make sure the component passes the correct state into its children. You can find a great example in this blog post written by Kent C. Dodds. Here's a code expert from it with

So I'm writing a test for my Item component and I tried to render the ItemCard component and then use that wrapper to create a snapshot but it returns an empty ShallowWrapper {} Please see the code for more info: Item.test.js import { shallow } from 'enzyme'; import { ItemCard } from '../Item'; const fakeItem = { id: 'aksnfj23', title: 'Fake Coat', price: '40000', description: 'This is suuuper fake...', image: 'fakecoat.jpg', largeImage: 'largefakecoat.jpg', }; describe('<ItemCard/>', () => { it('renders and matches the snapshot', () => { const wrapper = shallow(<ItemCard me item={fakeItem}

I have a component like that: <Parent> <Child/> </Parent> and <Child/> component have a method foo . I want test the foo method but I don't know how to access it. I tried: mount(<Parent><Child/></Parent>).props().children.foo or mount(<Parent><Child/></Parent>).children().foo but both them are undefined . I can't use .instance() because it's not root. I can't mount <Child/> only because the <Parent> add something (react-router's context.router ) on context and I need them when init <Child/> . Any idea with this? Pawan Gangwani I prefer shallow mount over full mount from enzyme. In conjunction