Stack Overflow
Stack Overflow

Questions tagged [enzyme]

Unit test library for React. It is developed by Airbnb. It can be used with other JavaScript testing frameworks like Mocha, Jest, Karma, etc.

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React components' output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Enzyme is unopinionated regarding which test runner or assertion library you use and should be compatible with all major test runners and assertion libraries out there. The documentation and examples for Enzyme use Mocha and Chai, but you should be able to extrapolate to your framework of choice.

4320 questions
79
votes
3 answers

Jest spyOn function called

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:…
Max Millington
  • 4,378
  • 4
  • 27
  • 34
73
votes
4 answers

Which Enzyme adapter works with React 17?

I have a React app, and I want to start writing unit tests with Enzyme. Enzyme's documentation discusses versions of React up to 16. In src/setupTests.js I currently have import Enzyme from 'enzyme'; import Adapter from…
Super Jade
  • 5,609
  • 7
  • 39
  • 61
73
votes
4 answers

How do I properly test for a rejected promise using Jest?

Code import { createUser } from '../services'; ... ... handleFormSubmit = () => { this.setState({ loading: true }); createUser() .then(() => { this.setState({ loading: false, }); }) .catch(e => { …
coding123
  • 823
  • 1
  • 8
  • 12
70
votes
5 answers

Jest Enzyme test a React component that returns null in render method

I have a component that returns null in render under certain conditions: render() { if (this.props.isHidden) { return null; } return
test
; } I want to check if the component is null when isHidden is true with jest and…
klugjo
  • 19,422
  • 8
  • 57
  • 75
69
votes
8 answers

How to mock useHistory hook in jest?

I am using UseHistory hook in react router v5.1.2 with typescript? When running unit test, I have got issue. TypeError: Cannot read property 'history' of undefined. import { mount } from 'enzyme'; import React from 'react'; import {Action} from…
Ivan Martinyuk
  • 1,230
  • 1
  • 9
  • 13
67
votes
5 answers

Testing React Functional Component with Hooks using Jest

So I'm moving away from class based components to functional components but am stuck while writing test with jest/enzyme for the methods inside the functional components which explicitly uses hooks. Here is the stripped down version of my…
acesmndr
  • 8,137
  • 3
  • 23
  • 28
67
votes
12 answers

How to test style for a React component attribute with Enzyme

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…
cristian camilo cedeño gallego
  • 3,502
  • 4
  • 20
  • 31
66
votes
3 answers

How to mock React component methods with jest and enzyme

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 …
Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
61
votes
4 answers

How can I use Jest to spy on a method call?

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…
seansean11
  • 949
  • 2
  • 9
  • 16
61
votes
8 answers

How do you simulate an keyDown enter event (or others) in Enzyme?

I'm trying to simulate a keyDown event, specifically for Enter, keyCode: 13. I've tried a number of different ways of doing this, but none of them are working. I've also looked online and it seems like this feature is either buggy or not working in…
reectrix
  • 7,999
  • 20
  • 53
  • 81
60
votes
2 answers

How to print the contents of enzyme's shallow wrapper

I have the following : import {shallow} from "enzyme" const wrapper = shallow(); how do I see the contents of wrapper?
Samjunior
  • 713
  • 1
  • 5
  • 14
60
votes
4 answers

How to select element text with react+enzyme

Just what it says. Some example code: let wrapper = shallow(
); const b = wrapper.find('.btn'); expect(b.text()).to.be.eql('OK'); // fail Also the html method returns the contents of the…
Kevin
  • 24,871
  • 19
  • 102
  • 158
58
votes
6 answers

Babel throwing Support for the experimental syntax 'jsx' isn't currently enabled

I started newly writing unit test cases using Jest and Enzyme for the react application and when try to run test cases using jest like "test": "jest --watch" rather "test": "react-scripts test" tests going through babel for the runner to understand…
Venkaiah Yepuri
  • 1,561
  • 3
  • 18
  • 29
57
votes
3 answers

Set state when testing functional component with useState() hook

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…
Anna
  • 2,911
  • 6
  • 29
  • 42
57
votes
4 answers

React enzyme testing, Cannot read property 'have' of undefined

I'm writing a test using Enzyme for React. My test is extremely straightforward: import OffCanvasMenu from '../index'; import { Link } from 'react-router'; import expect from 'expect'; import { shallow, mount } from 'enzyme'; import sinon from…
Toby
  • 12,743
  • 8
  • 43
  • 75
1
2
3
…
99 100