reactjs - ReferenceError: setStatusBarColor Hook 在定义时未定义

Question

在我进入这篇文章之前，这是我第一次在这里发帖，所以如果我解释得不好或者我需要包含其他信息，请告诉我。我在一个从事 React Native 项目的小组中，正在测试我们的第一个屏幕。当我去运行测试时，由于 ReferenceError 导致测试套件无法加载。查看ReferenceError时，它指向我正在测试的组件的导入，然后指向setStatusBarColor钩子的导入，它指向setStatusBarColor钩子的导出。作为参考，这是我正在运行的测试（我必须填充更多测试，但我想先成功运行它）：

import '../../../matchMedia.mock';
import React from 'react';
import renderer from 'react-test-renderer';
import HomeScreen from '../HomeScreen';
import ReactDOM from 'react-dom';

test('renders correctly', () => {
    const tree = renderer.create(HomeScreen).toJSON();
    expect(tree).toMatchSnapshot();
});

这是 HomeScreen 组件：

import React from 'react';
import { Text, TouchableOpacity, View, StyleSheet} from 'react-native';
import Logo from '../widgets/Logo';
import filter from '../../../assets/navigation/adjust-alt.png';
import settings from '../../../assets/navigation/settings.png';
import NavIcons from '../widgets/NavIcons';
import setStatusBarColor from '../utils/StatusBarColorFunctions';
import { COLORS } from '../../styles/COLORS';

const HomeScreen = ({ navigation }) => {
  const [setColor] = setStatusBarColor();

  React.useEffect(() => {
    navigation.addListener(
      'focus',
      () => {
        setColor(COLORS.white);
      },
    );
  },[])

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Logo />
        <View style={styles.buttonsContainer}>
          {
            [{ icon: filter, to: 'Filter' },
            { icon: settings, to: 'Settings' }].map(i => (
              <NavIcons
                key={i.to}
                source={i.icon}
                to={i.to}
                navigation={navigation} />
            ))
          }
        </View>
      </View>
      <Text>What are we looking to drink?</Text>
      <TouchableOpacity onPress={()=>{navigation.navigate('Map')}}>
        <Text>Map</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  buttonsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
})
export default HomeScreen;

这就是 setStatusBarColor 的来源：

import { useRecoilState } from 'recoil';
import { statusBarColor, bottomBarColor } from '../../atoms';

export default setStatusBarColor = () => {
  const [statusColor, setStatusColor] = useRecoilState(statusBarColor);
  const [bottomColor, setBottomColor] = useRecoilState(bottomBarColor);

  const setColor = (top, bottom) => {
    if (top && bottom) {
      setStatusColor(top);
      setBottomColor(bottom);
    } else {
      setStatusColor(top);
      setBottomColor(top);
    }
  }
  return [setColor];
}

输出的错误是：ReferenceError: setStatusBarColor is not defined

  2 | import { statusBarColor, bottomBarColor } from '../../atoms';
  3 | 
> 4 | export default setStatusBarColor = () => {
    |                                 ^
  5 |   const [statusColor, setStatusColor] = useRecoilState(statusBarColor);
  6 |   const [bottomColor, setBottomColor] = useRecoilState(bottomBarColor);
  7 | 

  at Object.<anonymous> (src/components/utils/StatusBarColorFunctions.js:4:33)
  at Object.<anonymous> (src/components/home/HomeScreen.js:7:1)
  at Object.<anonymous> (src/components/home/__test__/HomeScreen.test.js:4:1)

我很困惑，因为我觉得错误是说变量不存在，而实际上它确实存在。任何和所有的帮助将不胜感激！先感谢您！

标签： reactjsreact-nativeunit-testingreact-hooksreferenceerror