英文:
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("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(""))
);
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: ["superior", "baikal"], ...}
你正在使用:words[level].word.split("")
所以你没有 words[level].word
。
你可以通过在组件顶部记录日志来确认参数是否已定义,因为在出错之前它会到达 word
而不是 words
。但那部分看起来没问题。
你的组件期望接收类似 { words: [{ word: "superior" }, ...}
的内容,所以要么以这种方式传递它,要么通过 words[level].split
访问当前的参数。
英文:
Params: { words: ["superior", "baikal"], ...}
You're using: words[level].word.split("")
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: "superior" }, ...}
, so either pass it that way, or access the current params with words[level].split
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论