javascript - 如何使用快照在 useEffect 内使用异步回调来测试功能组件

Question

我正在尝试在我的组件上编写单元测试，它看起来像这样。

export const myComponent = ({text, list, getData = transport.getData}) => {
const [rows, setRows] = React.useState([]);

    React.useEffect(() => {
        const fetchData = async () => {
           const rows = await getData(list);
           setRows(rows);
        };
        fetchData();
    }, [list]);

    if (rows.length === 0) {
       return null;
    }

    return (
        // some JSX
    );
};

问题是组件通过异步函数获取数据，因此组件检查rows是否为空并返回null后会调用该函数。

if (rows.length === 0) {
   return null;
}

我模拟了 getData 所以它应该返回一些值。但是，我仍然不明白应该如何通过单元测试来覆盖这个组件。我想应该是快照，也许不对。

我的测试:

import React from 'react';
import {myComponent} from '../components/myComponent';
import renderer from 'react-test-renderer';

describe('myComponent', () => {
    test('should renders correctly', async () => {
        const mock = {
            text: 'text',
            list: [],
            getData: () =>
                Promise.resolve([
                    {
                        // ...
                    },
                ]),
        };
        const component = renderer.create(<myComponent text={mock.text} 
list={mock.list} getData={mock.getData}/>);
        let popup = component.toJSON();
        expect(popup).toMatchSnapshot();
    });
});

Answer 1

这是单元测试解决方案:

index.tsx:

import React from 'react';

const transport = {
  async getData(list) {
    return [{ id: 1 }];
  }
};

export const MyComponent = ({ text, list, getData = transport.getData }) => {
  const [rows, setRows] = React.useState<any[]>([]);

  React.useEffect(() => {
    console.count('useEffect');
    const fetchData = async () => {
      console.count('fetchData');
      const newRows = await getData(list);
      setRows(newRows);
    };
    fetchData();
  }, [list]);

  if (rows.length === 0) {
    return null;
  }

  return <div>rows count: {rows.length}</div>;
};

index.spec.tsx:

import React from 'react';
import { MyComponent } from './';
import renderer, { act } from 'react-test-renderer';

describe('myComponent', () => {
  test('should renders correctly', async () => {
    const mProps = {
      text: 'text',
      list: [],
      getData: jest.fn().mockResolvedValueOnce([{ id: 1 }, { id: 2 }, { id: 3 }])
    };
    let component;
    await act(async () => {
      component = renderer.create(<MyComponent {...mProps}></MyComponent>);
    });
    expect(component.toJSON()).toMatchSnapshot();
  });
});

单元测试结果:

PASS  src/stackoverflow/57778786/index.spec.tsx
  myComponent
    ✓ should renders correctly (29ms)

  console.count src/stackoverflow/57778786/index.tsx:13
    useEffect: 1

  console.count src/stackoverflow/57778786/index.tsx:15
    fetchData: 1

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        3.557s, estimated 8s

index.spec.tsx.snap:

// Jest Snapshot v1

exports[`myComponent should renders correctly 1`] = `
<div>
  rows count: 
  3
</div>
`;

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