React Native Jest测试Game Screen时Props数据未定义报错求助

问题场景 #

我在给React Native应用写Jest测试，验证Game Screen能否正常渲染，测试代码如下：

it("renders correctly", () => {
  const mockedParams = {
    route: { params: { words: ["superior", "baikal"], stage: 0 } },
    navigation: ''
  };

  const gameScreen = renderer.create(<GameScreen {...mockedParams} />).toJSON();

  expect(gameScreen).toBeTruthy();
});

Game Screen核心代码：

const Game = ({ route, navigation }) => {
  const {words, stage} = route.params;
  const [lives, setLives] = useState(3);
  const [points, setPoints] = useState(0);
  const [level, setLevel] = useState(0);
  const [letters, setLetters] = useState(words[level].word.split(""));
  const [curLetter, setCurLetter] = useState(0);
  const [showPopup, setShowPopup] = useState(false);
  const [rows, setRows] = useState(
    new Array(1).fill(new Array(letters.length).fill(""))
  );
  // 其余组件逻辑...
};

运行测试时出现报错：

TypeError: Cannot read property 'split' of undefined

问题原因 #

测试代码里传入的words是普通字符串数组：["superior", "baikal"]，但组件中却尝试访问words[level].word——也就是期望words的每个元素是带word属性的对象。这就导致words[0].word返回undefined，调用split()自然触发类型错误。

解决方案 #

有两种修复思路，选符合你业务逻辑的一种即可：

方案1：修改测试数据，匹配组件的参数期望 #

把测试中的words改成对象数组，每个元素包含word属性：

it("renders correctly", () => {
  const mockedParams = {
    route: { params: { 
      words: [{word: "superior"}, {word: "baikal"}],  // 改成对象数组匹配组件期望
      stage: 0 
    } },
    navigation: { navigate: jest.fn() }  // 建议替换空字符串为模拟导航对象，避免后续潜在报错
  };

  const gameScreen = renderer.create(<GameScreen {...mockedParams} />).toJSON();

  expect(gameScreen).toBeTruthy();
});

方案2：修改组件逻辑，适配字符串数组的输入 #

如果业务逻辑中words本来就应该是普通字符串数组，就调整组件的初始化代码：

// 替换原来的初始化行
const [letters, setLetters] = useState(words[level]?.split("") || []);

这里的可选链?.和默认值|| []，还能避免level超出数组长度时再次触发错误。

内容的提问来源于stack exchange，提问作者Magnus Tan