使用 Jest 和 Enzyme 模拟子组件回调

Question

如何使用 Jest 和 Enzyme 将 Child 组件的回调函数模拟为 return 特定值，然后在 Parent 组件的其他地方测试其效果？

在下面的示例中，当 Child 回调 onSelectionChange 发生时，它会更改状态，从而启用 Button 之前通过在 props <Button disabled={disableButton} />

我想将子组件从 onSelectionChange 模拟为 return false 并测试 Button disabled 属性是否已更改。

import React, { useState } from "react";
import Button from "./Button";
import Child from "./Child";

const Parent = () => {
  const [disableButton, setDisableButton] = useState(true);

  return (
    <>
      <Button disabled={disableButton} />
      <Child onSelectionChange={(isDisabled) => setDisableButton(isDisabled)} />
    </>
  );
};

export default Parent;

Answer 1

您不需要模拟任何组件。您可以使用 .invoke(invokePropName)(...args) => Any API 调用函数 prop。您甚至不必关心如何触发 onSelectionChange。只需使用正确的参数调用它，您需要确保这一点。

例如

Parent.tsx:

import React, { useState } from 'react';
import Button from './Button';
import Child from './Child';

const Parent = () => {
  const [disableButton, setDisableButton] = useState(true);

  return (
    <>
      <Button disabled={disableButton} />
      <Child onSelectionChange={(isDisabled) => setDisableButton(isDisabled)} />
    </>
  );
};

export default Parent;

Child.tsx:

import React from 'react';

const Child = ({ onSelectionChange }) => {
  return <div>Child</div>;
};

export default Child;

Button.tsx:

import React from 'react';

const Button = (props) => {
  return <button {...props}>click me</button>;
};

Parent.test.tsx:

import { shallow } from 'enzyme';
import React from 'react';
import Button from './Button';
import Child from './Child';
import Parent from './parent';

describe('71713192', () => {
  test('should pass', () => {
    const wrapper = shallow(<Parent />);
    expect(wrapper.find(Button).exists()).toBeTruthy();
    expect(wrapper.find(Button).prop('disabled')).toBeTruthy();
    wrapper.find(Child).invoke('onSelectionChange')(false);
    expect(wrapper.find(Button).prop('disabled')).toBeFalsy();
  });
});

测试结果：

 PASS  Whosebug/71713192/parent.test.tsx (9.794 s)
  71713192
    ✓ should pass (26 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |    87.5 |      100 |      50 |    87.5 |                   
 Button.tsx |      75 |      100 |       0 |      75 | 4                 
 Child.tsx  |      75 |      100 |       0 |      75 | 4                 
 parent.tsx |     100 |      100 |     100 |     100 |                   
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.596 s, estimated 12 s

包版本：

"enzyme": "^3.11.0",
"react": "^16.14.0",
"jest": "^26.6.3"

使用 Jest 和 Enzyme 模拟子组件回调

Mock child component callback with Jest and Enzyme

reactjs

unit-testing

jestjs

callback

enzyme