小编Ant*_*kis的帖子

让我们假设一个组件在 render 方法中返回 null，基于一些 prop。

使用 expect 来确保不呈现组件的最佳方法是什么？

例子：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Pagination from '../Pagination';

it('should not render if totaPages is 0', () => {
  const { container } = render(<Pagination activePage={1} totalPages={0} />);
  expect(container.firstChild).toBeNull();
});

上面的代码够吗？

这是我的项目（create-react-app）的结构：

/src/api/searchAPI.js 的内容：

import client from './client';

async function searchMulti(query, options = {}) {
  options.query = query;
  return await client.get('/search/multi', options);
}

export default {
  searchMulti
};

/src/api/index.js 的内容：

import movieAPI from './movieAPI';
import personAPI from './personAPI';
import searchAPI from './searchAPI';
import configurationAPI from './configurationAPI';

export { movieAPI, personAPI, searchAPI, configurationAPI };

QuickSearch 组件导入searchAPI 并使用它通过网络获取一些数据。

现在，我需要测试（使用react-testing-library）QuickSearch 组件。

因此，我想模拟api模块（在 /src/api/index.js 中导出）以使用模拟函数而不是searchAPI.searchMulti()。

如果我将下面的代码放在 /src/componentns/__tests__/QuickSearch.js 中，它就可以正常工作：

...
import { searchAPI } from '../../
...
... …