将 react-test-renderer 与 <Switch> 一起使用会导致“无法为无状态功能组件提供 refs”警告答案

【问题标题】：Using react-test-renderer with <Switch> causes "Stateless function components cannot be given refs" warning将 react-test-renderer 与 <Switch> 一起使用会导致“无法为无状态功能组件提供 refs”警告
【发布时间】：2018-04-14 00:13:43
【问题描述】：

我正在使用 react-test-renderer (16.0.0-beta.5) 对自定义 React Native 组件执行快照测试。该组件包含一个 Switch 组件，这会导致在测试执行期间抛出此警告：

console.error node_modules\fbjs\lib\warning.js:36

警告：无状态函数组件不能被赋予 refs。尝试访问此 ref 将失败。

检查Switch的渲染方法。未知（由 Switch 创建）在开关中

重现的最少代码：

import React from 'react';
import renderer from 'react-test-renderer';
import { Switch } from 'react-native';

test('renders correctly', () => {
  const tree = renderer.create(
    <Switch />
  );
});

更多细节：问题是由 Switch.render 使用的本机 RCTSwitch 组件引起的：

return (
  <RCTSwitch
    {...props}
    ref={(ref) => { this._rctSwitch = ref; }}
    onChange={this._onChange}
  />
);

正如你所见，这个组件被分配了一个 ref。但是，react-test-renderer 使用以下代码来检查组件是否是无状态的：

if (typeof value === 'object' && value !== null && typeof value.render === 'function') {
  // Proceed under the assumption that this is a class instance

因为 RCTSwitch 没有渲染方法，所以会引发警告。这是一个错误吗？

【问题讨论】：

标签： reactjs react-native jestjs

【解决方案1】：

无状态组件不支持引用，创建一个有状态组件。

更多详情见this答案

【讨论】：

Switch 是 react native 提供的一个组件，恐怕我不能让它有状态。此外，警告只是开玩笑地弹出。

【解决方案2】：

我在测试中添加了jest.mock('Switch')，现在它通过了。

请注意，这样做会从快照中删除 Switch 组件，但是由于没有理由测试纯 react-native 组件，我认为只要单独测试 Switch 使用的所有功能就可以了。

【讨论】：

如果你想在快照中保留Switch组件，你可以做jest.mock('Switch', () => 'Switch');。
当我添加这一行时，它显示“找不到模块'Switch'”。