Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`this` is undefined in bound functions when shallow rendering

See original GitHub issue

Describe the bug The following test passes in 3.4.1 but fails in 3.4.2.

class Comp extends Component {
  state = {
    key: "",
  }

  componentDidMount() {
    this.instanceFunction();
  }

  instanceFunction = () => this.setState(() => ({ key: "value" }));

  render() {
    const { key } = this.state;
    return null;
  }
}

it("should work", () => {
  shallow(<Comp />);
});

The error in 3.4.2 is:

FAIL src/test.js
  ✕ should work (16ms)

  ● should work

    Method “setState” is only meant to be run on a single node. undefined found instead.

      11 |   }
      12 |
    > 13 |   instanceFunction = () => this.setState(() => ({ key: "value" }));
         |                                 ^
      14 |
      15 |   render() {
      16 |     const { key } = this.state;

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1718:17)
      at ShallowWrapper.setState (node_modules/enzyme/build/ShallowWrapper.js:499:14)
      at Comp.ShallowWrapper.instance.setState (node_modules/enzyme/build/ShallowWrapper.js:184:33)
      at Comp.setState [as instanceFunction] (src/test.js:13:33)
      at Comp.instanceFunction [as componentDidMount] (src/test.js:10:10)
      at node_modules/enzyme/build/ShallowWrapper.js:189:20
      at Object.batchedUpdates (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:392:22)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:188:24)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (src/test.js:22:3)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.147s
Ran all test suites matching /src\/test.js/i.
error Command failed with exit code 1.

To Reproduce Steps to reproduce the behavior:

Run the above test with enzyme@3.4.2

Expected behavior The test should pass.

Desktop (please complete the following information):

OS: Mac OSX (but also fails in Windows)
Browser n/a
Version n/a

Issue Analytics

State:
Created 5 years ago
Reactions:20
Comments:16 (7 by maintainers)

Top GitHub Comments

3reactions

vishalsehgal111commented, Aug 16, 2018

+1 yes happening to us too, due to https://github.com/airbnb/enzyme/blob/a50570d847fac11dc122c43651107e46ba03de73/packages/enzyme/src/ShallowWrapper.js#L177-L180 as setState is getting appended to instance. I think we should avoid addingsetState to instance as then also the code will get executed without appending instance.

1reaction

koba04commented, Aug 17, 2018

@ljharb Thank you! I’m reviewing it.

Top Results From Across the Web

Ref returns undefined during shallow render Jest/Enzyme

I want to test input onchange event in component. I have such jsx: export default class Login extends Component { constructor(props) ...

[Solved]-React 'this' undefined when calling a callback function in a ...

Coding example for the question React 'this' undefined when calling a callback ... sinon.spy to mock function and enzyme.shallow render for React Component?...

Testing Components with children - Testing Angular

There are two fundamental ways to test Components with children: A unit test using shallow rendering. The child Components are not rendered.

Hooks FAQ - React

Are Hooks slow because of creating functions in render? How to avoid passing callbacks down? How to read an often-changing value from useCallback?...

Reactivity Fundamentals - Vue.js

Vue will call the function when creating a new component instance, and wrap ... Where necessary, use null , undefined or some other...