Props data appears undefined when trying to render screen for testing.

huangapple go评论71阅读模式
英文:

Props data appears undefined when trying to render screen for testing

问题

我在为我的React Native应用进行Jest测试,并且我想测试我的游戏屏幕是否正确渲染。我在下面编写了以下测试以传递所需的参数给游戏屏幕。

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

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

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

游戏屏幕:

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属性传递给游戏屏幕时,它是未定义的,即使我在测试文件中为其定义了值。我该如何解决这个问题?

英文:

I'm doing jest testing for my react-native app and I want to test that my Game Screen renders correctly. I wrote the following test below to pass the required params to the Game Screen.

  it(&quot;renders correctly&quot;, () =&gt; {
    const mockedParams = {
      route: { params: { words: [&quot;superior&quot;, &quot;baikal&quot;], stage: 0 } },
      navigation: &#39;&#39;
    };

    const gameScreen = renderer.create(&lt;GameScreen {...mockedParams} /&gt;).toJSON();

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

Game Screen

const Game = ({ route, navigation }) =&gt; {
  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(&quot;&quot;));
  const [curLetter, setCurLetter] = useState(0);
  const [showPopup, setShowPopup] = useState(false);
  const [rows, setRows] = useState(
    new Array(1).fill(new Array(letters.length).fill(&quot;&quot;))
  );

However when I run the test, I get the following error:

> TypeError: Cannot read property 'split' of undefined

It seems like the words prop is undefined when it gets passed to the Game Screen even though I have defined values for it in my test file. How do I fix this?

答案1

得分: 1

Params: { words: [&quot;superior&quot;, &quot;baikal&quot;], ...}

你正在使用:words[level].word.split(&quot;&quot;)

所以你没有 words[level].word

你可以通过在组件顶部记录日志来确认参数是否已定义,因为在出错之前它会到达 word 而不是 words。但那部分看起来没问题。

你的组件期望接收类似 { words: [{ word: &quot;superior&quot; }, ...} 的内容,所以要么以这种方式传递它,要么通过 words[level].split 访问当前的参数。

英文:

Params: { words: [&quot;superior&quot;, &quot;baikal&quot;], ...}

You're using: words[level].word.split(&quot;&quot;)

So you don't have a words[level].word.

You can tell that params are defined because it gets to word instead of words before there's an error. You could confirm this by logging out your params at the top of your component, but that part looks fine.

Your component is expecting something like { words: [{ word: &quot;superior&quot; }, ...}, so either pass it that way, or access the current params with words[level].split.

huangapple
  • 本文由 发表于 2023年2月27日 09:16:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576069.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定