React 单元测试匿名函数答案

【问题标题】：React unit testing anonymous functionReact 单元测试匿名函数
【发布时间】：2020-05-04 16:59:39
【问题描述】：

我正在尝试测试一个 onChange 匿名函数，该函数会更改我的文本框中的值。我想验证如果 onChange 内部的函数被调用，状态是否会改变。函数本身很简单：

onChange={(e) => this.setState({someState: e.value})}

如果函数有名称，我会执行以下操作：

         test('myFunction should change someState value', () => {

                 const wrapper = shallow(<MyComponent/>);
                 const instance = wrapper.instance();

                const mockEvent = {
                    target:{
                        value: "some value in textbox"
                     }        
                   };

                const expectedValue = "some value in textbox";

                instance.myFunction(mockEvent);
                expect(wrapper.state().someState).toEqual(expectedValue)

              });

由于该函数是匿名的，我不知道如何用实例调用它。我不想给函数命名，因为我不希望测试影响我的代码。什么是好的解决方案？

【问题讨论】：

当someState 发生变化时，组件的呈现是否有视觉上的变化？一段文字或列表或其他东西？这将是一种以用户为中心的间接断言状态已更改的方法。
@JakeWorth 在这种情况下，只有文本框中的文本应该改变。
你需要触发change事件，然后你可以断言state().someState已经改变，或者DOM已经改变。 我不想给函数命名，因为我不希望测试影响我的代码 - 出于可测试性的原因，这样做根本不是一件好事，另一件好事是每次将相同的道具传递给onChange 允许优化你不会从匿名函数中获得。

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

有两种方法可以测试这种情况。例如

index.tsx:

import React, { Component } from 'react';

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      someValue: '',
    };
  }
  render() {
    return (
      <>
        <input type="text" onChange={(e) => this.setState({ someValue: e.target.value })}></input>
      </>
    );
  }
}

index.test.tsx:

import MyComponent from './';
import { shallow } from 'enzyme';
import React from 'react';

describe('61597604', () => {
  it('should pass', () => {
    const wrapper = shallow(<MyComponent></MyComponent>);
    const mEvent = { target: { value: 'ok' } };
    wrapper.find('input').simulate('change', mEvent);
    expect(wrapper.state()).toEqual({ someValue: 'ok' });
  });

  it('should pass 2', () => {
    const wrapper = shallow(<MyComponent></MyComponent>);
    const input = wrapper.find('input').getElement();
    const mEvent = { target: { value: 'ok' } };
    input.props.onChange(mEvent);
    expect(wrapper.state()).toEqual({ someValue: 'ok' });
  });
});

100% 覆盖率的单元测试结果：

 PASS  stackoverflow/61597604/index.test.tsx (8.059s)
  61597604
    ✓ should pass (13ms)
    ✓ should pass 2 (1ms)

-----------|---------|----------|---------|---------|-------------------
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:       2 passed, 2 total
Snapshots:   0 total
Time:        9.213s

【讨论】：