如何使用Cypress測試React原生應用
譯文Cypress 是一種現代化的測試自動化工具，因其易于安裝、具有對各種報告的內置支持以及編寫單元、API 和端到端測試的能力而廣受歡迎。
Cypress支持幾乎所有的現代架構開發框架，比如Angular、React Native、Vu，以及MVC框架等等。
本文將討論如何使用Cypress測試React Native應用程序。
什么是React Native應用程序?
React Native是一個基于JavaScript的開源框架，支持使用相同代碼庫在Android、iOS和Web應用等多個平臺上構建不同類型的應用程序。
React Native允許人們訪問本地視圖、API和組件。因此，開發將更快，更高效。
構建React應用程序
Expo框架幫助構建 React Native應用程序。它支持基于相同代碼庫構建的Android、iOS和Web應用程序。Expo在Github中列出了很多有用的例子。
使用Expo，你可以構建一個簡單的React原生應用:
1. 使用npm安裝expo： npm install expo
2. 使用命令創建原生應用： npx create-react-native-app –template
3. 使用參考:
- 安裝 expo cli運行你的應用程序： npm i -g expo-cli
- 進入app目錄，并輸入命令: npm run web
- 在瀏覽器窗口中啟動應用程序，訪問地址： http://localhost:19006/
- 如果你使用了一個空白的 React 項目模板，它應該如下圖所示，是一個簡單的頁面。
注意：端口可能會發生變化，運行命令后檢查控制臺的日志。
下面，我們使用一個空白的項目模板創建一個React應用程序，包含最基本的代碼。 App.js 是主要的源代碼，如下所示:
import { View, Text } from "react-native";
export default function App() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Universal React with Expo</Text>
</View>
);
}
這樣做是為了在設備上設置 React 應用程序。
如何用Cypress執行React應用程序測試
Cypress教程提供了關于設置Cypress的詳細指南。
我們至少要做到以下幾點：
1. 安裝Cypress: npm install cypress
2. 打開Cypress 項目: npx cypress open
此時Cypress創建了目錄的所有基本結構。
參考例子:
Expo my-react-app 訪問地址是 http://localhost:19006/ ,所以我們需要訪問這個地址來測試我們的應用程序。
我們之前創建的expo應用程序只有一組文本： “Universal React with Expo”. 我們使用一個簡單的Cypress腳本來驗證。
在你的項目目錄中，創建 firsttest.js文件，并添加Cypress腳本來驗證:
describe('My First Test', () => {
it('Verify Text', () => {
cy.visit('http://localhost:19006/');
cy.get("div[id='root']").should('have.text', 'Universal React with Expo');
});
})
在上面的代碼中，我們正在訪問到我們的本地網站，并驗證文本是否存在。
使用React Native和Cypress驗證API調用
大多數React Native應用都在內部調用API接口，所以我們也可以用Cypress來驗證。
假設我們有一個React應用，它有一個API調用。
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
export default function App() {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://reqres.in/api/users?page=1')
.then((response) => response.json())
.then((json) => setData(json.data))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
accessibilityLabel="users"
data={data}
renderItem={({ item }) => (
<Text testID="user" >{item.id}, {item.first_name}, {item.email}</Text>
)}
/>
)}
</View>
);
};
上面的代碼調用API https://reqres.in/api/users?page=1 返回一組JSON值。我們應該能夠斷言body和status等的內容。
在React Native應用中驗證API調用的Cypress腳本
describe('My First Test', () => {
it('Verify API', () => {
cy.intercept('*/users?*').as('users');
cy.visit('http://localhost:19006/');
cy.wait('@users').then(({response}) => {
expect(response.statusCode).to.eq(200)
expect(response.body.data.length).to.eq(6)
expect(response.body.data[0].email).to.eq('george.bluth@reqres.in')
})
});
})
在上面的代碼中，我們使用Cypress Intercept特性，等待API加載。然后我們從API中獲取響應，并在測試中驗證它:
這樣我們就可以在Cypress中測試React原生應用。此外，我們還可以設置Viewport并將其更改為不同的設備分辨率，以便測試移動Web應用程序。
原文標題：??Test React Native Apps With Cypress??，作者：Ganesh Hegde
