用 Jest 测试 onChange 事件

Question

根据我的代码覆盖率，我需要测试我的onChange事件中调用的 function。 这实际上是我使用useState挂钩更新功能组件的 state 的地方。

这是我的组件：

const Component:React.FC<{}> = () => {
  const {value, setState} = useState('');
  return(
    <View>
      <CustomComponent 
        onChange={(value) => setState(value)}
      />
    </View>
  )
}

customComponent是从 React Input 组件派生的组件。 当其中的文本发生变化时，它会调用onChange function 作为文本的道具传递。 这就是父组件的方式，它在其 state 中设置文本输入的值，如上所示。

我的代码覆盖率返回此分析：

onChange={//(value) => setState(value)//}

必须覆盖//之间的代码。 我真的不明白我怎么能涵盖这个。 首先想到的是使用模拟函数，但我似乎找不到如何模拟它到onChange事件，因为我没有将任何东西作为道具传递给主组件。

Answer 1

经过几次测试，我终于明白，覆盖并不是要求对 onChange function 进行实际测试，而是实际评估的值。 因此，这就是我正在做的事情：

1. 获取 TextInput 子组件
2. 更改其文本
3. 评估它呈现的内容

我在这里使用@testing-library/react-native，因为它可以通过使用accessibilityLabel 来更轻松地选择树组件（它实际上让我理解了该道具的重要性）。
这是测试的样子：

describe('Testing useState functions', () => {
    test('test', () => {
      //Rendering the component and its tree
      const { container, getByLabelText } = render(<SignupView />);
      //Extracting the child, username_input component with his accessibilityLabel
      const username_input = getByLabelText('username_input');
      const email_input = getByLabelText('email_input');
      //Fire a native changeText event with a specific value
      fireEvent.changeText(username_input, 'doe');
      fireEvent.changeText(email_input, 'doe@joe.com');
      //Checking the rendered value 
      expect(username_input.props.value).toEqual('doe');
      expect(email_input.props.value).toEqual('doe@joe.com');
    });
  });

Answer 2

这是一个单元测试解决方案：

index.tsx ：

import React, { useState } from 'react';

const View = ({ children }) => <div>{children}</div>;
const CustomComponent = ({ onChange }) => <input onChange={e => onChange(e.target.value)}></input>;

export const Component: React.FC<{}> = () => {
  const [value, setState] = useState('');
  console.log(value);
  return (
    <View>
      <CustomComponent onChange={val => setState(val)} />
    </View>
  );
};

index.spec.tsx ：

import React from 'react';
import { Component } from './';
import { mount } from 'enzyme';

describe('Component', () => {
  test('should handle change event', async () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = mount(<Component></Component>);
    expect(logSpy).toBeCalledWith('');
    wrapper.find('input').simulate('change', { target: { value: 'UT' } });
    expect(logSpy).toBeCalledWith('UT');
    expect(wrapper).toMatchSnapshot();
    logSpy.mockRestore();
  });
});

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

 PASS  src/stackoverflow/58826185/index.spec.tsx (8.795s)
  Component
    ✓ should handle change event (70ms)

  console.log node_modules/jest-mock/build/index.js:860


  console.log node_modules/jest-mock/build/index.js:860
    UT

-----------|----------|----------|----------|----------|-------------------|
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:   1 passed, 1 total
Time:        10.402s, estimated 12s

源码： https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58826185