Cypress 是一種現(xiàn)代化的測試自動化工具，因其易于安裝、具有對各種報(bào)告的內(nèi)置支持以及編寫單元、API 和端到端測試的能力而廣受歡迎。

Cypress支持幾乎所有的現(xiàn)代架構(gòu)開發(fā)框架，比如Angular、React Native、Vu，以及MVC框架等等。

本文將討論如何使用Cypress測試React Native應(yīng)用程序。

什么是React Native應(yīng)用程序?

React Native是一個(gè)基于JavaScript的開源框架，支持使用相同代碼庫在Android、iOS和Web應(yīng)用等多個(gè)平臺上構(gòu)建不同類型的應(yīng)用程序。

React Native允許人們訪問本地視圖、API和組件。因此，開發(fā)將更快，更高效。

構(gòu)建React應(yīng)用程序

Expo框架幫助構(gòu)建 React Native應(yīng)用程序。它支持基于相同代碼庫構(gòu)建的Android、iOS和Web應(yīng)用程序。Expo在Github中列出了很多有用的例子。

使用Expo，你可以構(gòu)建一個(gè)簡單的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
• 在瀏覽器窗口中啟動應(yīng)用程序，訪問地址： http://localhost:19006/
• 如果你使用了一個(gè)空白的 React 項(xiàng)目模板，它應(yīng)該如下圖所示，是一個(gè)簡單的頁面。

注意：端口可能會發(fā)生變化，運(yùn)行命令后檢查控制臺的日志。

下面，我們使用一個(gè)空白的項(xiàng)目模板創(chuàng)建一個(gè)React應(yīng)用程序，包含最基本的代碼。 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>
  );
}

這樣做是為了在設(shè)備上設(shè)置 React 應(yīng)用程序。

如何用Cypress執(zhí)行React應(yīng)用程序測試

Cypress教程提供了關(guān)于設(shè)置Cypress的詳細(xì)指南。

我們至少要做到以下幾點(diǎn)：

1. 安裝Cypress: npm install cypress

2. 打開Cypress 項(xiàng)目: npx cypress open

此時(shí)Cypress創(chuàng)建了目錄的所有基本結(jié)構(gòu)。

參考例子:

Expo my-react-app 訪問地址是 http://localhost:19006/ ,所以我們需要訪問這個(gè)地址來測試我們的應(yīng)用程序。

我們之前創(chuàng)建的expo應(yīng)用程序只有一組文本： “Universal React with Expo”. 我們使用一個(gè)簡單的Cypress腳本來驗(yàn)證。

在你的項(xiàng)目目錄中，創(chuàng)建 firsttest.js文件，并添加Cypress腳本來驗(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ǎng)站，并驗(yàn)證文本是否存在。

使用React Native和Cypress驗(yàn)證API調(diào)用

大多數(shù)React Native應(yīng)用都在內(nèi)部調(diào)用API接口，所以我們也可以用Cypress來驗(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 (
    <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>
  );
};

上面的代碼調(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)，并在測試中驗(yàn)證它:

這樣我們就可以在Cypress中測試React原生應(yīng)用。此外，我們還可以設(shè)置Viewport并將其更改為不同的設(shè)備分辨率，以便測試移動Web應(yīng)用程序。

原文標(biāo)題：??Test React Native Apps With Cypress??，作者：Ganesh Hegde