使用 react shallow-renderer 对输入进行 onChange 反应测试

Question

我正在尝试使用 onChange prop 测试 React 的 searchForm 组件。

const SearchForm = () => {
  const [value, setValue] = useState('');

  return (
    <form className={styles.searchForm}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)} // test this line
        className={styles.searchForm__input}
      />
      <button type="submit" aria-label="Search" className={styles.searchForm__button} />
    </form>
  );
};

这是我的测试示例：

import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import SearchForm from '../index';

const setUp = () => {
  const renderer = new ShallowRenderer();
  renderer.render(<SearchForm />);
  return renderer.getRenderOutput();
};

describe('render form component', () => {

  it('handle onChange in form input field', () => {
    const result = setUp();
    expect(result).toMatchSnapshot();
  });
});

这个测试通过了，但是 JEST 说这行代码（带有 onChange）未被覆盖。

我找到了如何启动 onChange：

result.props.children[0].props.onChange();

这会启动原始道具，但我在 e.target 上遇到错误 -- 无法读取未定义的属性。我觉得我需要以某种方式模拟 setValue，但我不知道该怎么做。我是 JEST 的新手。也许这可以通过 react-test-renderer 以更好的方式完成。

Answer 1

解决方法如下：

index.tsx:

import React, { useState } from 'react';

export const SearchForm = () => {
  const [value, setValue] = useState('');

  return (
    <form>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit" aria-label="Search" />
    </form>
  );
};

index.test.tsx:

import React from 'react';
import TestRenderer, { act } from 'react-test-renderer';
import ShallowRenderer from 'react-test-renderer/shallow';
import { SearchForm } from './';

describe('66907704', () => {
  it('should handle onChange event', () => {
    const testRenderer = TestRenderer.create(<SearchForm />);
    const testInstance = testRenderer.root;
    expect(testInstance.findByType('input').props.value).toEqual('');
    const mEvent = { target: { value: 'teresa teng' } };
    act(() => {
      testInstance.findByType('input').props.onChange(mEvent);
    });
    expect(testInstance.findByType('input').props.value).toEqual('teresa teng');
  });

  it('should handle onChange event when use shallow render', () => {
    const shallowRenderer = ShallowRenderer.createRenderer();
    shallowRenderer.render(<SearchForm />);
    let tree = shallowRenderer.getRenderOutput();
    let input = tree.props.children[0];
    const mEvent = { target: { value: 'teresa teng' } };
    input.props.onChange(mEvent);
    tree = shallowRenderer.getRenderOutput();
    input = tree.props.children[0];
    expect(input.props.value).toEqual('teresa teng');
  });
});

单元测试结果：

 PASS  examples/66907704/index.test.tsx (6.636 s)
  66907704
    ✓ should handle onChange event (10 ms)
    ✓ should handle onChange event when use shallow render (1 ms)

-----------|---------|----------|---------|---------|-------------------
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:        7.443 s

包版本：

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

使用 react shallow-renderer 对输入进行 onChange 反应测试

React test onChange on input using react shallow-renderer

reactjs

jestjs

react-test-renderer

react-hooks