تست واحد در کاربردهای بومی واکنش – مجله سر و صدا

درباره نویسنده

Fortune Ikechi یک مهندس Frontend است که در Rivers State نیجریه مستقر است. وی دانشجوی دانشگاه پورت-هارکورت است. او عاشق اجتماع و … است
بیشتر در مورد
ثروت
…

React Native یکی از پرکاربردترین چارچوب ها برای ساخت برنامه های موبایل است. این آموزش برای توسعه دهندگانی است که می خواهند تست برنامه های React Native را که می سازند شروع کنند. ما از چارچوب آزمایش Jest و آنزیم استفاده خواهیم کرد.

در این مقاله ، ما اصول اصلی تست را یاد خواهیم گرفت ، کتابخانه های مختلفی را برای آزمایش یک برنامه بررسی می کنیم ، و نحوه آزمایش واحدها (یا اجزای) یک برنامه React Native را می آموزیم. با کار با یک برنامه React Native ، دانش خود را در مورد تست تقویت می کنیم.

توجه داشته باشید: با استفاده از این آموزش ، دانش پایه JavaScript و React Native سود خوبی خواهد داشت.

تست واحد چیست؟

تست واحد ، سطح آزمایشی است که در آن اجزای جداگانه نرم افزار مورد آزمایش قرار می گیرد. ما این کار را انجام می دهیم تا اطمینان حاصل کنیم که هر جز as مطابق انتظار کار می کند. یک جز component کوچکترین قسمت قابل آزمایش نرم افزار است.

برای توضیح ، بیایید یک ایجاد کنیم Button م componentلفه و شبیه سازی یک آزمون واحد:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
function AppButton({ onPress }) {
    return (
      <TouchableOpacity
          style={[styles.button,
              { backgroundColor: colors[color] }]}
                 onPress={onPress} >
          <Text style={styles.text}>Register</Text>
      </TouchableOpacity>
    );
}
const styles = StyleSheet.create({
    button: {
        backgroundColor: red;
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        color: #fff
    }
})
export default AppButton;

این Button م componentلفه دارای متن و یک است onPress تابع. بیایید این م componentلفه را تست کنیم تا ببینیم آزمایش واحد چیست.

ابتدا بیایید یک فایل آزمایشی به نام ایجاد کنیم Button.test.js:

it('renders correctly across screens', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});

در اینجا ، ما در حال آزمایش هستیم تا ببینیم آیا ما است Button کامپوننت آنطور که باید در تمام صفحه های برنامه ارائه می شود. این همان چیزی است که آزمایش واحد به آن معنا دارد: آزمایش اجزای یک برنامه برای اطمینان از عملکرد مناسب آنها.

تست واحد در واکنش به برنامه های بومی

یک برنامه React Native را می توان با ابزارهای مختلف آزمایش کرد ، برخی از آنها موارد زیر است:

• وب درایور
  این ابزار آزمون منبع باز برای برنامه های Node.js همچنین برای آزمایش برنامه های React Native نیز استفاده می شود.
• کابوس
  این عملیات آزمایشی را در مرورگر به طور خودکار انجام می دهد. بر اساس مستندات، “هدف این است که چند روش ساده را تقلید کنید که اقدامات کاربر را تقلید می کند (مانند goto، type و click) ، با یک API که به جای بازخورد عمیق تو در تو ، برای هر بلوک از برنامه نویسی همزمان است. “
• است
  این یکی از محبوب ترین کتابخانه های آزمایشی موجود است و کتابخانه ای که امروز بر روی آن تمرکز خواهیم کرد. مانند React ، توسط فیس بوک نگهداری می شود و برای ارائه تنظیمات “پیکربندی صفر” برای حداکثر عملکرد ساخته شده است.
• موکا
  Mocha یک کتابخانه محبوب برای آزمایش برنامه های React و React Native است. به دلیل سهولت تنظیم و استفاده و سرعت آن ، به ابزاری برای انتخاب توسعه دهندگان تبدیل شده است.
• یاس
  با توجه به آن مستندات، Jasmine یک چارچوب توسعه مبتنی بر رفتار برای آزمایش کد JavaScript است.

مقدمه ای بر شوخی و آنزیم

با توجه به آن مستندات، “Jest یک چارچوب جذاب جاوا اسکریپت با تمرکز بر سادگی است”. با پیکربندی صفر کار می کند. پس از نصب (با استفاده از یک مدیر بسته مانند npm یا Yarn) ، Jest آماده استفاده است ، و نیازی به نصب دیگری نیست.

آنزیم یک چارچوب تست جاوا اسکریپت برای برنامه های React Native است. (اگر به جای React Native با React کار می کنید ، راهنما در دسترس استما از آنزیم برای آزمایش واحدهای خروجی برنامه خود استفاده خواهیم کرد. با استفاده از آن می توانیم زمان اجرای برنامه را شبیه سازی کنیم.

بیایید با تنظیم پروژه خود شروع کنیم. ما با استفاده از انجام شده با آن برنامه در GitHub. این یک بازار نرم افزار React Native است. با شبیه سازی آن شروع کنید ، به پوشه بروید و با اجرای موارد زیر برای npm بسته ها را نصب کنید

npm install

… یا این برای نخ:

yarn install

این دستور همه بسته های برنامه ما را نصب می کند. پس از انجام این کار ، ما سازگاری رابط کاربر برنامه خود را با استفاده از عکس های فوری ، که در زیر آورده شده است ، آزمایش خواهیم کرد.

عکسهای فوری و پیکربندی شوخی

در این بخش ، با آزمایش عکس های فوری با استفاده از Jest ، لمس کاربر و رابط کاربری اجزای برنامه را آزمایش خواهیم کرد.

قبل از انجام این کار ، باید Jest و وابستگی های آن را نصب کنیم. برای نصب Jest for Expo React Native ، دستور زیر را اجرا کنید:

yarn add jest-expo --dev

این نصب می شود jest-expo در فهرست برنامه ما در مرحله بعدی ، باید اطلاعات خود را به روز کنیم package.json پرونده برای داشتن یک اسکریپت آزمایشی:

"scripts": {
    "test" "jest"
},
"jest": {
    "preset": "jest-expo"
}

با افزودن این دستور ، به Jest می گوییم کدام بسته را در برنامه خود ثبت کند و در کجا ثبت کند.

مورد بعدی اضافه کردن بسته های دیگری به برنامه ما است که به Jest کمک می کند تا یک آزمایش جامع انجام دهد. برای npm ، این را اجرا کنید

npm i react-test-renderer --save-dev

… و برای نخ ، این:

yarn add react-test-renderer --dev

ما هنوز باید کمی تنظیمات خود را انجام دهیم package.json فایل. طبق اسناد Expo React Native، باید a اضافه کنیم transformIgnorePattern پیکربندی که از اجرای آزمونها در Jest هر زمان که یک فایل منبع با آزمایشی مطابقت دارد جلوگیری می کند (به عنوان مثال اگر آزمایشی ساخته شده باشد و پرونده مشابه آن در node modules پروژه).

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
  ]
}

حال ، بیایید یک فایل جدید با نام ایجاد کنیم App.test.js، برای نوشتن اولین آزمون ما ما آزمایش خواهیم کرد که آیا App یک عنصر کودک در درخت خود دارد:

import React from "react";
import renderer from "react-test-renderer";
import App from "./App.js"
describe("<App />", () => {
    it('has 1 child', () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree.children.length).toBe(1);
    });
});

حالا ، بدو yarn test یا معادل npm آن اگر App.js یک عنصر فرزند دارد ، آزمون ما باید قبول شود ، که در رابط خط فرمان تأیید خواهد شد.

در کد بالا ، وارد کرده ایم React و react-test-renderer، که آزمایشات ما را برای Expo. ما تبدیل کرده ایم <App /> درخت جز component به JSON ، و سپس از Jest خواست تا ببیند آیا تعداد اجزای کودک در JSON برگردانده شده برابر با انتظار ما است یا خیر.

تست های عکس فوری بیشتر

مانند دیوید آدنای اظهار داشت:

“یک عکس فوری مطمئن می شود که رابط کاربری (UI) یک برنامه وب به طور غیرمنتظره تغییر نمی کند. این کد یک م componentلفه را در یک لحظه از زمان ضبط می کند ، بنابراین ما می توانیم م componentلفه را در یک حالت با هر حالت احتمالی دیگری که ممکن است طول بکشد مقایسه کنیم. “

این امر به ویژه هنگامی انجام می شود که یک پروژه شامل سبک های جهانی باشد که در بسیاری از ملفه ها استفاده می شود. بیایید یک عکس فوری برای آن بنویسیم App.js برای تست سازگاری UI آن:

it('renders correctly across screens', () => {
  const tree = renderer.create().toJSON();
  expect(tree).toMatchSnapshot();
});

این را به تست هایی که قبلاً نوشته ایم اضافه کنید و سپس اجرا کنید yarn test (یا معادل npm آن). اگر آزمون ما قبول شود ، باید این را ببینیم:

  PASS  src/App.test.js
  √ has 1 child (16ms)
  √ renders correctly (16ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   1 total
Time:        24s

این به ما می گوید که آزمایش های ما گذشته و زمانی که آنها صرف کرده اند. در صورت گذراندن تست ها نتیجه شما مشابه خواهد بود.

بیایید به مسخره برخی از توابع در Jest برویم.

مکالمه های API مسخره

طبق مستندات جست:

توابع ساختگی به شما امکان می دهد با پاک کردن پیاده سازی واقعی یک تابع ، ضبط تماس ها با تابع (و پارامترهای منتقل شده در آن تماس ها) ، گرفتن نمونه هایی از توابع سازنده هنگام نمونه سازی با “جدید” ، و اجازه آزمایش پیکربندی زمانی مقادیر برگشتی.

به عبارت ساده تر ، کپی کپی از یک شی object یا عملکرد بدون عملکرد واقعی آن عملکرد است. این عملکرد را تقلید می کند.

مسخره ها از بسیاری جهات به ما کمک می کنند تا برنامه ها را آزمایش کنیم ، اما مزیت اصلی این است که آنها نیاز ما به وابستگی ها را کاهش می دهند.

مسخره کردن را معمولاً می توان به یکی از دو روش انجام داد. یکی ایجاد یک تابع ساختگی است که به کد مورد آزمایش تزریق می شود. دیگر این که یک تابع ساختگی بنویسید که بسته یا وابستگی متصل به جزr را لغو کند.

اکثر سازمان ها و توسعه دهندگان ترجیح می دهند مسخره های دستی بنویسند که از عملکرد تقلید می کنند و از داده های جعلی برای آزمایش برخی از م componentsلفه ها استفاده می کنند.

React Native شامل می شود fetch در شی جهانی. برای جلوگیری از برقراری تماس های واقعی API در تست واحد ، آنها را مسخره می کنیم. در زیر روشی برای مسخره کردن همه ، اگر نه بیشتر تماسهای API ما در React Native و بدون نیاز به وابستگی وجود دارد:

global.fetch = jest.fn();

// mocking an API success response once
fetch.mockResponseIsSuccess = (body) => {
  fetch.mockImplementationForOnce (
    () => Promise.resolve({json: () => Promise.resolve(JSON.parse(body))})
  );
};

// mocking an API failure response for once
fetch.mockResponseIsFailure = (error) => {
  fetch.mockImplementationForOnce(
    () => Promise.reject(error)
  );
};

در اینجا ، ما تابعی را نوشتیم که سعی دارد یکبار API را واکشی کند. با انجام این کار ، آن یک قول را برمی گرداند ، و هنگامی که حل شد ، بدن را در JSON برمی گرداند. این شبیه به پاسخ ساختگی برای یک معامله واکشی ناموفق است – خطایی را برمی گرداند.

در زیر product جز component برنامه ما ، حاوی یک product اعتراض و بازگشت اطلاعات به عنوان props.

import React from 'react';
const Product = () => {
    const product = {
        name: 'Pizza',
        quantity: 5,
        price: '$50'
    }
    return (
        <>
            <h1>Name: {product.name}</h1>   
            <h1>Quantity: {product.quantity}</h1>   
            <h1>Price: {product.price}</h1>   
        </>
    );
}
export default Product;

بیایید تصور کنیم که ما سعی داریم همه اجزای محصول خود را آزمایش کنیم. دسترسی مستقیم به پایگاه داده ما یک راه حل عملی نیست. اینجاست که مسخره بازی می کند. در کد زیر ، ما در تلاش هستیم تا با استفاده از Jest برای توصیف اشیا in موجود در این م aلفه ، یکی از اجزای محصول را مسخره کنیم.

describe("", () => {
  it("accepts products props", () => {
    const wrapper = mount(<Customer product={product} />);
    expect(wrapper.props().product).toEqual(product);
  });
  it("contains products quantity", () => {
    expect(value).toBe(3);
  });
});

استفاده می کنیم describe از Jest برای آزمایش آزمایشاتی که می خواهیم انجام شود. در آزمایش اول ، بررسی می کنیم که آیا جسمی که از آن عبور می کنیم برابر با وسایل مورد تمسخر است.

در آزمون دوم ، ما در حال عبور از customer لوازم برای اطمینان از اینکه یک محصول است و مطابق با مسخره های ما است. با انجام این کار ، لازم نیست همه اجزای محصول خود را آزمایش کنیم و همچنین باید از بروز اشکال در کد خود جلوگیری کنیم.

مسخره کردن درخواستهای API خارجی

تا به حال ، ما تست هایی را برای تماس های API با عناصر دیگر در برنامه خود اجرا کرده ایم. حالا بیایید یک تماس API خارجی را مسخره کنیم. ما قصد داریم از Axios استفاده کنیم. برای آزمایش تماس خارجی با API ، باید درخواست های خود را مسخره کنیم و همچنین پاسخ های دریافتی را مدیریت کنیم. ما قصد استفاده از axios-mock-adapter Axios را مسخره کنند. ابتدا باید نصب کنیم axios-mock-adapter با اجرای دستور زیر:

yarn add axios-mock-adapter

کار بعدی ایجاد مسخره های ما است:

import MockAdapter from 'axios-mock-adapter';
import Faker from 'faker'
import ApiClient from '../constants/api-client';
import userDetails from 'jest/mockResponseObjects/user-objects';

let mockApi = new MockAdapter(ApiClient.getAxiosInstance());
let validAuthentication = {
    name: Faker.internet.email(),
    password: Faker.internet.password()

mockApi.onPost('requests').reply(config) => {
  if (config.data ===  validAuthentication) {
      return [200, userDetails];
    }
  return [400, 'Incorrect username and password'];
 });

در اینجا ، ما با ApiClient و انتقال یک نمونه Axios به آن برای تمسخر اعتبار کاربر. ما از بسته ای به نام استفاده می کنیم faker.js برای تولید داده های جعلی کاربر ، مانند آدرس ایمیل و رمز عبور.

این تمسخر همانطور که از API انتظار داریم رفتار می کند. اگر درخواست موفقیت آمیز باشد ، پاسخی با کد وضعیت 200 برای تأیید دریافت خواهیم کرد. و یک کد وضعیت 400 برای درخواست بد از سرور دریافت خواهیم کرد ، که با JSON با پیام “نام کاربری و رمز عبور نادرست” ارسال می شود.

حالا که مسخره ما آماده است ، بیایید یک تست برای درخواست API خارجی بنویسیم. مانند گذشته ، ما از عکس های فوری استفاده خواهیم کرد.

it('successful sign in with correct credentials', async () => {
  await store.dispatch(authenticateUser('ikechifortune@gmail.com', 'password'));
  expect(getActions()).toMatchSnapshot();
});

it('unsuccessful sign in with wrong credentials', async () => {
  await store.dispatch(authenticateUser('ikechifortune@gmail.com', 'wrong credential'))
  .catch((error) => {
    expect(errorObject).toMatchSnapshot();
  });

در اینجا ، ما با استفاده از JavaScript بومی ، در حال آزمایش ورود به سیستم موفقیت آمیز با اعتبار صحیح هستیم async await ورودی های خود را نگه داریم. در همین حال ، authenticateUser تابع از Jest درخواست را تأیید می کند و مطمئن می شود که با عکسهای قبلی ما مطابقت دارد. در مرحله بعدی ، ما برای ورود به سیستم ناموفق در صورت اعتبار اشتباه ، مانند آدرس ایمیل یا رمز ورود ، آزمایش می کنیم و به عنوان پاسخ خطایی ارسال می کنیم.

حالا ، بدو yarn test یا npm test. من مطمئن هستم که همه آزمایشات شما قبول می شود.

بیایید ببینیم چگونه می توان اجزای موجود در یک کتابخانه مدیریت دولتی ، Redux را آزمایش کرد.

آزمایش عملکردها و کاهش دهنده های Redux با استفاده از عکس های فوری

نمی توان انکار کرد که Redux یکی از پرکاربردترین مدیران ایالت برای کاربردهای React است. بیشتر عملکردها در Redux شامل a dispatch، که تابعی از فروشگاه Redux است که برای ایجاد تغییر در وضعیت یک برنامه کاربرد دارد. آزمایش Redux می تواند مشکل باشد زیرا Redux actions در اندازه و پیچیدگی به سرعت رشد می کنند. با عکس های فوری Jest ، این کار آسان تر می شود. بیشتر آزمایش ها با Redux به دو چیز برمی گردد:

• برای تست کردن actions، ما ایجاد می کنیم redux-mock-store و اعزام اقدامات.
• برای تست گیرنده ها ، ما وارد می کنیم reducer و یک حالت عملی و عملی را به آن منتقل کنید.

در زیر یک تست Redux با عکس های فوری آورده شده است. ما با احراز هویت کاربر در ، اقدامات ارسالی را آزمایش خواهیم کرد SIGN-IN و دیدن اینکه چگونه LOGOUT عمل توسط انجام می شود user کاهنده

import mockStore from 'redux-mock-store';
import { LOGOUT } from '../actions/logout';
import User from '../reducers/user';
import { testUser } from 'jest/mock-objects';

  describe('Testing the sign in authentication', () => {
    const store = mockStore();

  it('user attempts with correct password and succeeds', async () => {
  await store.dispatch(authenticateUser('example@gmail.com', 'password'));
  expect(store.getActions()).toMatchSnapshot();
  });
});
  describe('Testing reducers after user LOGS OUT', () => {
    it('user is returned back to initial app state', () => {
      expect(user(testUser, { type: LOGOUT })).toMatchSnapshot();
    });
  });

در تست اول ، ما در حال توصیف احراز هویت ورود به سیستم و ایجاد فروشگاه ساختگی هستیم. ما این کار را با وارد کردن a انجام می دهیم mockStore از Redux ، و سپس وارد کردن روشی به نام testUser از Jest برای کمک به ما در تمسخر یک کاربر. در مرحله بعدی ، ما آزمایش می کنیم که چه زمانی کاربر با استفاده از آدرس ایمیل و گذرواژه مطابق با موارد موجود در فروشگاه عکس فوری ، به برنامه وارد می شود. بنابراین ، عکس فوری تضمین می کند اشیایی که کاربر وارد می کند با هر بار اجرای یک آزمایش مطابقت دارند.

در آزمایش دوم ، ما در حال آزمایش برای زمان ورود کاربر هستیم. هنگامی که عکس فوری کاهش دهنده ما تأیید کرد که کاربر از سیستم خارج شده است ، به حالت اولیه برنامه برمی گردد.

بعد ، ما با دویدن تست می کنیم yarn test. اگر تست ها به نتیجه رسیده باشند ، باید نتیجه زیر را مشاهده کنیم:

  PASS  src/redux/actions.test.js
  √ user attempts with correct password and succeeds (23ms)
  √ user is returned back to initial app state (19ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 total
Time:        31s

نتیجه

با استفاده از Jest ، آزمایش برنامه های React Native هرگز آسان نبوده است ، به ویژه با عکس های فوری ، که بدون در نظر گرفتن سبک های جهانی ، رابط کاربر را تضمین می کند. همچنین ، Jest به ما اجازه می دهد برخی از تماسها و ماژولهای API را در برنامه خود مسخره کنیم. با آزمایش م componentsلفه های برنامه React Native ، می توانیم این کار را بیشتر انجام دهیم.

منابع بیشتر

(ks ، ra ، al ، il)