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
56
votes
7 answers

Figuring out how to mock the window size changing for a react component test

So basically when the component mounts, I have an event listener listen for resize events. It toggles the isMobileView state and then passes it into the children as a prop. So it's imperative that this works and is tested. I'm fairly new to testing…
joe
  • 1,563
  • 4
  • 16
  • 35
54
votes
7 answers

How to mock e.preventDefault in react component's child

Hy, I don't know how to mock an inline function in React component's child My stack: sinon, chai, enzyme; Component usage: someFn()} /> Component's render: render() { return (
  • S Panfilov
    • 16,641
    • 17
    • 74
    • 96
    • 51
    votes
    8 answers

    Components using Date objects produce different snapshots in different timezones

    I'm using Enzyme with enzyme-to-json to do Jest snapshot testing of my React components. I'm testing shallow snapshots of a DateRange component that renders a display field with the current range (e.g. 5/20/2016 - 7/18/2016) and two DateInput…
    hon2a
    • 7,006
    • 5
    • 41
    • 55
    48
    votes
    3 answers

    What is the difference between Jest and enzyme?

    I'm new to Unit testing. I want to test React project. As I started with React documentation which refers to enzyme as test utility which is kind of ambiguous to me. What is the difference between Jest and enzyme? Is enzyme assertion library or…
    Eslam Tahoon
    • 2,205
    • 4
    • 15
    • 21
    47
    votes
    6 answers

    Using Jest to mock a React component with props

    I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this: import ComponentToMock from…
    Mike Hopkins
    • 1,011
    • 1
    • 11
    • 13
    45
    votes
    6 answers

    Where should the enzyme setup file be written?

    Yesterday I upgraded my React project to v16.0, but I found that Enzyme had some problems Error: Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call…
    Archie Shi
    • 453
    • 1
    • 4
    • 5
    45
    votes
    5 answers

    Jest: mocking console.error - tests fails

    The Problem: I have a simple React component I'm using to learn to test components with Jest and Enzyme. As I'm working with props, I added the prop-types module to check for properties in development. prop-types uses console.error to alert when…
    Matthew Bakaitis
    • 11,600
    • 7
    • 43
    • 53
    44
    votes
    6 answers

    How do you mock useLocation() pathname using shallow test enzyme Reactjs?

    I have header component like below: import { useLocation } from "react-router-dom"; const Header = () => { let route = useLocation().pathname; return route === "/user" ? : ; } How will you mock this…
    purmo037
    • 543
    • 1
    • 4
    • 7
    43
    votes
    10 answers

    How to set initial state for useState Hook in jest and enzyme?

    Currently Im using functional component with react hooks. But I'm unable to test the useState hook completely. Consider a scenario like, in useEffect hook I'm doing an API call and setting value in the useState. For jest/enzyme I have mocked data to…
    Srigar
    • 1,648
    • 3
    • 14
    • 28
    43
    votes
    6 answers

    How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?

    I want to test to see whether an image has properly loaded in a React app. I have decided to check the src attribute of the img element nested within the React component. I want to use the Jest testing framework and, if needed, the Enzyme testing…
    Andrew Willems
    • 11,880
    • 10
    • 53
    • 70
    42
    votes
    1 answer

    Enzyme simulate an onChange event

    I'm testing a react component with Mocha and Enzyme. Here is the component (shortened for simplicity of course): class New extends React.Component { // shortened for simplicity handleChange(event) { // handle changing state of input …
    stoebelj
    • 1,536
    • 2
    • 14
    • 31
    41
    votes
    3 answers

    jest + enzyme, using mount(), document.getElementById() returns null on component which appear after _method call

    I faced a problem with my jest+enzyme mount() testing. I am testing a function, which switches displaying components. Switch between components: when state.infoDisplayContent = 'mission' a missionControl component is mounted, when…
    Dmytro Zhytomyrsky
    • 1,371
    • 2
    • 11
    • 17
    38
    votes
    13 answers

    Your test suite must contain at least one test

    I have updated some of the dependencies today in my project, but it went through really smoothly. Now, when I'm about to push it, I started my tests. And boom. All of them throw: Your test suite must contain at least one test. My packages: "jest":…
    mdmb
    • 4,833
    • 7
    • 42
    • 90
    38
    votes
    6 answers

    Testing onChange function in Jest

    I'm relatively new to Jest and testing in general. I have a component with an input element: import * as React from "react"; export interface inputProps{ placeholder: string; className: string; value: string; onSearch: (depID:…
    blankface
    • 5,757
    • 19
    • 67
    • 114
    37
    votes
    2 answers

    "Navbar refers to a value, but is being used as a type here" when trying to render a shallow copy of my component when testing

    I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, I get the ts error "'Navbar' refers to a value,…
    elitu
    • 473
    • 1
    • 4
    • 8
    1 2
    3
    …
    99 100