Question

根据我的代码覆盖范围，我需要测试onChange事件中调用的函数。实际上，这是我使用useState钩子更新功能组件状态的地方。

这是我的组件：

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

customComponent是从“反应输入”组件派生的组件。当文本在其中更改时，它将调用onChange函数作为其属性与文本一起传递。这就是父组件的方式，该组件将输入的文本的值设置为如上所示的状态。

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

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

必须覆盖 // 之间的代码。我真的不明白该如何处理。首先想到的是使用模拟函数，但是我似乎找不到如何将其模拟到onChange事件的方法，因为我没有将任何道具作为道具传递给主组件。

Answer 1

这是单元测试解决方案：

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

Answer 2

经过几次测试，我终于明白，覆盖率不是在要求onChange函数的实际测试，而是要求评估的值。因此，这就是我正在做的：

获取TextInput子组件
更改其文字
评估其呈现效果

我在这里使用@ 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');
    });
  });

用Jest测试onChange事件

2 个答案: