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
37
votes
9 answers

Jest/Enzyme ShallowWrapper is empty when creating Snapshot

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…
dragi
  • 1,462
  • 5
  • 16
  • 28
37
votes
5 answers

TypeError: Cannot read property 'contextTypes' of undefined

I'm trying to test a React-app with Jest. I use Enzyme's shallow to render my App.js component in App-test-js but I'm getting this error: TypeError: Cannot read property 'contextTypes' of undefined This is my App.js: /* global google */ import…
37
votes
2 answers

How to pass context down to the Enzyme mount method to test component which includes Material UI component?

I am trying to use mount from Enzyme to test my component in which a several Material UI component are nested. I get this error when running the test: TypeError: Cannot read property 'prepareStyles' of undefined After some digging, I did found…
Erika
  • 905
  • 1
  • 8
  • 15
36
votes
3 answers

How should I test React Hook "useEffect" making an api call with Typescript?

I'm writing some jest-enzyme tests for a simple React app using Typescript and the new React hooks. However, I can't seem to properly simulate the api call being made inside the useEffect hook. useEffect makes the api call and updates the useState…
Matt Berg
  • 499
  • 1
  • 4
  • 10
36
votes
4 answers

Error: This method is only meant to be run on single node. 0 found instead

I am testing a keybinding feature in a component. The component is rather simple, event listener for the keyup and fires up a redux action which will hide the component. I have cleaned up my code here to only relevant information. I am able to make…
Sam Sedighian
  • 885
  • 1
  • 7
  • 21
35
votes
8 answers

Mocking react-router-dom hooks using jest is not working

I'm using Enzyme's shallow method to test a component which uses the useParams hook to get an ID from the URL params. I'm trying to mock the useParams hook so that it does't call the actual method, but it doesn't work. I'm still getting TypeError:…
Maxime Côté
  • 351
  • 1
  • 3
  • 5
35
votes
4 answers

Testing react component enclosed in withRouter (preferably using jest/enzyme)

I have a React component which is enclosed within Higher Order Component withRouter as below: module.exports = withRouter(ManageProfilePage); My routes are as below:
Amol Aggarwal
  • 2,674
  • 3
  • 24
  • 32
35
votes
3 answers

JS Unit testing run multiple times with different parameters

Is their any way to have multiple parameters in one test instead of copying and pasting the function again? Example in NUnit for C#: [TestCase("0", 1)] [TestCase("1", 1)] [TestCase("2", 1)] public void UnitTestName(string input, int expected) { …
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92
34
votes
5 answers

Check if child component rendered - Jest, Enzyme

In my unit test, I want to test whether the parent component is successfully rendering its child component. Here is the code: describe('Parent Component', () => { it('renders Child component', () => { const wrapper = shallow(
darKnight
  • 5,651
  • 13
  • 47
  • 87
34
votes
6 answers

Nested components testing with Enzyme inside of React & Redux

I have a component SampleComponent that mounts another "connected component" (i.e. container). When I try to test SampleComponent by mounting (since I need the componentDidMount), I get the error: Invariant Violation: Could not find "store" in…
Detuned
  • 3,652
  • 4
  • 27
  • 54
33
votes
4 answers

Jest / Enzyme - How to test at different viewports?

I am trying to run a test on a component at a certain viewport width. I am doing the following, but this doesn't seem to change it: test('Component should do something at a certain viewport width.', () => { global.innerWidth = 2000; const…
JoeTidee
  • 24,754
  • 25
  • 104
  • 149
32
votes
5 answers

Does Enzyme support React version 18?

Recently, React 18 has released and I have upgraded my project to 18. I noticed that all of my unit tests that were written by Jest and Enzyme are failing. I have used mount from Enzyme as a wrapper of my component and noticed the following…
saon
  • 591
  • 1
  • 7
  • 19
32
votes
5 answers

Testing React components that fetches data using Hooks

My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this. const App = () => { const [ state, setState ] =…
mthmulders
  • 9,483
  • 4
  • 37
  • 54
32
votes
2 answers

How to verify React props in Jest and Enzyme?

So I was trying to learn about testing in React and I have this: Button.js and Button.test.js The question is commented along with the code below: // Button.js import React from 'react'; import { string, bool, func } from 'prop-types'; import {…
vizFlux
  • 735
  • 2
  • 9
  • 14
31
votes
5 answers

Unit testing React click outside component

Using the code from this answer to solve clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown',…
csilk
  • 2,732
  • 3
  • 23
  • 40