当包含的反应元素具有箭头函数事件处理程序时，如何使用 .contains(nodeOrNodes) A​​PI？

Question

For below example, .contains(nodeOrNodes) => Boolean API works fine.

index.tsx :

import React from 'react';

const Comp = ({ onChange }) => (
  <form>
    <input type="text" placeholder="username" onChange={onChange} />
  </form>
);

export default Comp;

index.test.tsx :

import React from 'react';
import { shallow } from 'enzyme';
import Comp from '.';

describe('Comp', () => {
  it('should render', () => {
    const noop = () => null;
    const wrapper = shallow(<Comp onChange={noop} />);
    expect(
      wrapper.contains(
        <form>
          <input type="text" placeholder="username" onChange={noop} />
        </form>,
      ),
    ).toBeTruthy();
  });
});

Unit test results:

 PASS  src/stackoverflow/46133847/02/index.test.tsx
  Comp
    ✓ should render (13ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.754s, estimated 24s

But, if I change the onChange event handler using the arrow function:

index.ts :

import React from 'react';

const Comp = ({ onChange }) => (
  <form>
    <input type="text" placeholder="username" onChange={(e) => onChange(e)} />
  </form>
);

export default Comp;

The unit test will fail.

 FAIL  src/stackoverflow/46133847/02/index.test.tsx
  Comp
    ✕ should render (18ms)

  ● Comp › should render

    expect(received).toBeTruthy()

    Received: false

      13 |         </form>,
      14 |       ),
    > 15 |     ).toBeTruthy();
         |       ^
      16 |   });
      17 | });
      18 | 

      at Object.it (src/stackoverflow/46133847/02/index.test.tsx:15:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        7.689s, estimated 25s

I think the test failed because the arrow function created a new function reference. This new function has a different reference with noop function passed into Comp .

But what I want is, is there any way like expect.any(Function) of jestjs , just to assert whether or not the wrapper contains any function of onChange event handler?

Package versions:

"enzyme": "^3.10.0",
"jest": "^24.9.0",

Answer 1

To be honest, I do not think using .contains(nodeOrNodes) is good way for this situation.

My personal suggestion is followed by below:

 let inputComponent = wrapper.find("input[placeholder]='username'");
 expect(inputComponent.length).toBe(1); // This tests your component is exists rather than contains)
 expect(inputComponent.props().onChange).toEqual(noop); //This tests onChange function  is equal your mock function

Please vote it, if it works for you