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
31
votes
1 answer

How can I test a change handler for a file-type input in React using Jest/Enzyme?

I want to test whether my React component can use FileReader to import the contents of a user-selected file from an element. My code below shows a working component with a broken test. In my test I'm attempting to use a blob as…
Andrew Willems
  • 11,880
  • 10
  • 53
  • 70
31
votes
4 answers

Syntax Error when test component with SASS file imported

I'm trying test my React component with Jest + Enzyme, but when my component has SASS file (scss), is occurring SyntaxError. This is my SASS file content: .user-box { width: 50px; height: 50px; } And I just import that in my component: import…
Lai32290
  • 8,062
  • 19
  • 65
  • 99
31
votes
4 answers

How to mock react-router context

I've got fairly simple react component (Link wrapper which adds 'active' class if route is active): import React, { PropTypes } from 'react'; import { Link } from 'react-router'; const NavLink = (props, context) => { const isActive =…
jmarceli
  • 19,102
  • 6
  • 69
  • 67
30
votes
12 answers

How to test child component method with Enzyme?

I have a component like that: and component have a method foo. I want test the foo method but I don't know how to access it. I…
Fomahaut
  • 1,212
  • 1
  • 11
  • 18
30
votes
3 answers

Redux How to update the store in unit tests?

Using enzyme, mocha and expect asserts. The aim of my unit test is to check that dispatch gets called with the correct arguments when paused and not paused in mergeProps. I need to dynamically change the state of my store to do: paused: true. At…
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92
29
votes
4 answers

How to test react-router with enzyme

I am using enzyme+mocha+chai to test my react-redux project. Enzyme provides shallow to test component behavior. But I didn't find a way to test the router. I am using react-router as below: ...
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
28
votes
3 answers

How to write test case for ErrorBoundary in React using Jest / Enzyme

I have been trying (without success) to write a test case for ErrorBoundary component that is handling errors via componentDidCatch lifecycle method. Despite the error produced by child component inside the component, …
Sylwek
  • 685
  • 1
  • 7
  • 16
28
votes
5 answers

Test setting text value with React and Enzyme

How do you set the text of a text input and then test it's value with React / Enzyme? const input = wrapper.find('#my-input'); input.simulate('change', { target: { value: 'abc' } } ); const val = input.node.value; //val is '' All the solutions…
GN.
  • 8,672
  • 10
  • 61
  • 126
28
votes
2 answers

TypeError: Cannot read property 'prepareStyles' of undefined

My Component looks like import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table'; const TransactionList =…
daydreamer
  • 87,243
  • 191
  • 450
  • 722
27
votes
7 answers

How to mock/spy useState hook in jest?

I am trying to spy on useState React hook but i always get the test failed This is my React component: const Counter= () => { const[counter, setCounter] = useState(0); const handleClick=() => { setCounter(counter + 1); } …
Saher Elgendy
  • 1,519
  • 4
  • 16
  • 27
27
votes
2 answers

Accessing the State of a Functional Component with React Hooks when Testing with Enzyme

I was wondering how to test a state change of functional components with the useState hook with Enzyme. Usually the test would be something along the lines of expect(wrapper.state()).toEqual(expectedState) but I get the error: ReactWrapper::state()…
avatarhzh
  • 2,175
  • 4
  • 21
  • 32
27
votes
2 answers

How to test componentDidUpdate()?

This is an example implementation: export class Person extends Component { componentDidMount() { const { onLoadProfile, onLoadPolicy, person } = this.props onLoadProfile(person.profile.uri) onLoadPolicy(person.policy.uri) } …
Filipe Gorges Reuwsaat
  • 856
  • 1
  • 9
  • 23
26
votes
4 answers

Trigger useEffect in Jest and Enzyme testing

I'm using Jest and Enzyme to test a React functional component. MyComponent: export const getGroups = async () => { const data = await fetch(groupApiUrl); return await data.json() }; export default function MyWidget({ groupId, }) { //…
Batman
  • 5,563
  • 18
  • 79
  • 155
26
votes
2 answers

What is the purpose of `beforeEach` global in Jest?

I always find Jest-Enzyme test cases starting with a beforeEach global that resembles like the following: describe('TEST BLOCK' () => { let wrapper; beforeEach(() => { wrapper = shallow(); }); )); The function inside the…
user117829
  • 526
  • 1
  • 8
  • 23
25
votes
3 answers

Testing a React component with Enzyme. Typescript can't find instance methods

I want to test a React class component. Let's say I have a method in my class that computes something based on the current state and props. import Component from './Component' const wrapper = enzyme.shallow(); it('does…
Chris
  • 2,069
  • 3
  • 22
  • 27
1 2 3
…
99 100