建站
咨詢
售后
建站咨詢
新聞中心
Cypress支持幾乎所有的現(xiàn)代架構(gòu)開(kāi)發(fā)框架，比如Angular、React Native、Vu，以及MVC框架等等。
十多年的海陵網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整海陵建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“海陵網(wǎng)站設(shè)計(jì)”,“海陵網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
本文將討論如何使用Cypress測(cè)試React Native應(yīng)用程序。
什么是React Native應(yīng)用程序?
React Native是一個(gè)基于JavaScript的開(kāi)源框架，支持使用相同代碼庫(kù)在Android、iOS和Web應(yīng)用等多個(gè)平臺(tái)上構(gòu)建不同類型的應(yīng)用程序。
React Native允許人們?cè)L問(wèn)本地視圖、API和組件。因此，開(kāi)發(fā)將更快，更高效。
構(gòu)建React應(yīng)用程序
Expo框架幫助構(gòu)建 React Native應(yīng)用程序。它支持基于相同代碼庫(kù)構(gòu)建的Android、iOS和Web應(yīng)用程序。Expo在Github中列出了很多有用的例子。
使用Expo，你可以構(gòu)建一個(gè)簡(jiǎn)單的React原生應(yīng)用:
1. 使用npm安裝expo： npm install expo
2. 使用命令創(chuàng)建原生應(yīng)用： npx create-react-native-app –template
3. 使用參考:
- 安裝 expo cli運(yùn)行你的應(yīng)用程序： npm i -g expo-cli
- 進(jìn)入app目錄，并輸入命令: npm run web
- 在瀏覽器窗口中啟動(dòng)應(yīng)用程序，訪問(wèn)地址： http://localhost:19006/
- 如果你使用了一個(gè)空白的 React 項(xiàng)目模板，它應(yīng)該如下圖所示，是一個(gè)簡(jiǎn)單的頁(yè)面。
注意：端口可能會(huì)發(fā)生變化，運(yùn)行命令后檢查控制臺(tái)的日志。
下面，我們使用一個(gè)空白的項(xiàng)目模板創(chuàng)建一個(gè)React應(yīng)用程序，包含最基本的代碼。 App.js 是主要的源代碼，如下所示:
import { View, Text } from "react-native";
export default function App() {
return (
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
Universal React with Expo
);
} 這樣做是為了在設(shè)備上設(shè)置 React 應(yīng)用程序。
如何用Cypress執(zhí)行React應(yīng)用程序測(cè)試
Cypress教程提供了關(guān)于設(shè)置Cypress的詳細(xì)指南。
我們至少要做到以下幾點(diǎn)：
1. 安裝Cypress: npm install cypress
2. 打開(kāi)Cypress 項(xiàng)目: npx cypress open
此時(shí)Cypress創(chuàng)建了目錄的所有基本結(jié)構(gòu)。
參考例子:
Expo my-react-app 訪問(wèn)地址是 http://localhost:19006/ ,所以我們需要訪問(wèn)這個(gè)地址來(lái)測(cè)試我們的應(yīng)用程序。
我們之前創(chuàng)建的expo應(yīng)用程序只有一組文本： “Universal React with Expo”. 我們使用一個(gè)簡(jiǎn)單的Cypress腳本來(lái)驗(yàn)證。
在你的項(xiàng)目目錄中，創(chuàng)建 firsttest.js文件，并添加Cypress腳本來(lái)驗(yàn)證:
describe('My First Test', () => {
it('Verify Text', () => {
cy.visit('http://localhost:19006/');
cy.get("div[id='root']").should('have.text', 'Universal React with Expo');
});
})
在上面的代碼中，我們正在訪問(wèn)到我們的本地網(wǎng)站，并驗(yàn)證文本是否存在。
使用React Native和Cypress驗(yàn)證API調(diào)用
大多數(shù)React Native應(yīng)用都在內(nèi)部調(diào)用API接口，所以我們也可以用Cypress來(lái)驗(yàn)證。
假設(shè)我們有一個(gè)React應(yīng)用，它有一個(gè)API調(diào)用。
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 (
{isLoading ?
accessibilityLabel="users"
data={data}
renderItem={({ item }) => (
{item.id}, {item.first_name}, {item.email}
)}
/>
)}
);
};上面的代碼調(diào)用API https://reqres.in/api/users?page=1 返回一組JSON值。我們應(yīng)該能夠斷言body和status等的內(nèi)容。
在React Native應(yīng)用中驗(yàn)證API調(diào)用的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中獲取響應(yīng)，并在測(cè)試中驗(yàn)證它:
這樣我們就可以在Cypress中測(cè)試React原生應(yīng)用。此外，我們還可以設(shè)置Viewport并將其更改為不同的設(shè)備分辨率，以便測(cè)試移動(dòng)Web應(yīng)用程序。
原文標(biāo)題：??Test React Native Apps With Cypress??，作者：Ganesh Hegde
本文標(biāo)題：如何使用Cypress測(cè)試React原生應(yīng)用
新聞來(lái)源：http://www.dlmjj.cn/article/dpoodej.html
