Tutorial Asas: Menguji Komponen React dengan Jest

Kod ujian ialah amalan yang mengelirukan bagi kebanyakan pembangun. Ini boleh difahami kerana ujian menulis memerlukan lebih banyak usaha, masa dan keupayaan untuk meramalkan kemungkinan kes penggunaan. Pemula dan pembangun yang bekerja pada projek kecil selalunya cenderung mengabaikan ujian sepenuhnya kerana kekurangan sumber dan tenaga kerja.

Namun, saya rasa anda patut menguji komponen anda atas beberapa sebab:

1. Ia memberi anda lebih keyakinan dalam kod anda.
2. Ujian boleh meningkatkan kecekapan kerja anda.

Tindak balas tidak berbeza. Ujian boleh memberikan kestabilan dan ketekalan apabila keseluruhan aplikasi anda mula bertukar menjadi sekumpulan komponen yang sukar diselenggara. Menulis ujian dari hari pertama akan membantu anda menulis kod yang lebih baik, menangkap pepijat dengan mudah dan mengekalkan aliran kerja pembangunan yang lebih baik.

Dalam artikel ini, saya akan membimbing anda melalui semua yang anda perlu tahu untuk menulis ujian bagi komponen React. Saya juga akan membincangkan beberapa amalan dan teknik terbaik. Mari mulakan!

Menguji komponen dalam React

Pengujian ialah proses mengesahkan bahawa penegasan ujian kami adalah betul dan ia kekal betul sepanjang hayat permohonan. Penegasan ujian ialah ungkapan Boolean yang mengembalikan benar melainkan terdapat ralat dalam kod.

Sebagai contoh, penegasan boleh semudah ini: "Apabila pengguna menavigasi ke /log masuk, modal dengan id #login harus dipaparkan, jadi jika ternyata anda telah merosakkan komponen log masuk, entah bagaimana, dakwaan itu akan kembali palsu. Penegasan tidak terhad kepada perkara yang diberikan, anda juga boleh membuat penegasan tentang cara aplikasi anda bertindak balas terhadap interaksi pengguna dan operasi lain.

Pembangun hadapan boleh menggunakan banyak strategi ujian automatik untuk menguji kod mereka. Kami akan mengehadkan perbincangan kami kepada tiga paradigma ujian perisian popular dalam React: ujian unit, ujian fungsian dan ujian integrasi.

Ujian unit

Ujian unit ialah salah satu veteran ujian yang masih popular dalam kalangan ujian. Seperti namanya, anda akan menguji kepingan kod individu untuk mengesahkan bahawa ia berfungsi secara bebas seperti yang diharapkan. Oleh kerana seni bina komponen React, ujian unit adalah pilihan semula jadi. Ia juga lebih pantas kerana anda tidak perlu bergantung pada penyemak imbas.

Ujian unit membantu anda memikirkan setiap komponen secara berasingan dan menganggapnya sebagai fungsi. Ujian unit untuk komponen tertentu harus menjawab soalan berikut:

1. Adakah anda mempunyai sebarang alat peraga? Jika ya, apakah kesannya kepada mereka?
2. Apakah komponen yang dihasilkannya?
3. Patutkah ia mempunyai status? Bila atau bagaimana untuk mengemas kini status?
4. Adakah terdapat prosedur yang perlu dipatuhi semasa pemasangan atau penyahpasangan atau interaksi pengguna?

Ujian berfungsi

Ujian fungsional digunakan untuk menguji kelakuan sebahagian daripada aplikasi. Ujian fungsional biasanya ditulis dari perspektif pengguna. Ciri biasanya tidak terhad kepada satu komponen. Ia boleh menjadi borang lengkap atau keseluruhan halaman.

Sebagai contoh, apabila anda membina borang pendaftaran, ia mungkin melibatkan komponen untuk elemen borang, makluman dan ralat (jika ada). Komponen yang diberikan selepas borang diserahkan juga merupakan sebahagian daripada fungsi ini. Ini tidak memerlukan pemapar penyemak imbas kerana kami akan menguji dengan DOM maya dalam ingatan.

Ujian integrasi

Ujian integrasi ialah strategi ujian di mana semua komponen individu diuji sebagai satu kumpulan. Ujian integrasi cuba untuk meniru pengalaman pengguna dengan menjalankan ujian pada penyemak imbas sebenar. Ini adalah lebih perlahan daripada ujian fungsian dan unit kerana setiap suite ujian dilaksanakan pada penyemak imbas langsung.

Dalam React, ujian unit dan ujian kefungsian adalah lebih popular daripada ujian penyepaduan kerana ia lebih mudah untuk ditulis dan diselenggara. Itulah yang akan kami bincangkan dalam tutorial ini.

Ketahui alatan anda

Anda memerlukan alatan dan kebergantungan tertentu untuk memulakan ujian unit dan fungsi aplikasi React anda. Saya telah menyenaraikannya di bawah.

Mempunyai rangka kerja ujian

Jest ialah rangka kerja ujian yang memerlukan konfigurasi sifar, jadi mudah untuk disediakan. Ia lebih popular daripada menguji rangka kerja seperti Jasmine dan Mocha kerana ia dibangunkan oleh Facebook. Jest juga lebih pantas daripada pendekatan lain kerana ia menggunakan teknik pintar untuk menyelaraskan larian ujian merentasi rangkaian pekerja. Di samping itu, setiap ujian dijalankan dalam persekitaran kotak pasir untuk mengelakkan konflik antara dua ujian berturut-turut.

Jika anda menggunakan aplikasi create-react-, ia disertakan dengan Jest. Jika tidak, anda mungkin perlu memasang Jest dan beberapa kebergantungan lain. Anda boleh membaca lebih lanjut mengenainya di halaman dokumentasi Jest rasmi.

React Test Renderer

Walaupun anda menggunakan create-react-app, anda perlu memasang pakej ini untuk memaparkan syot kilat. Ujian syot kilat adalah sebahagian daripada pustaka Jest. Oleh itu, anda boleh menggunakan pemapar ujian untuk menjana output HTML boleh bersiri dengan cepat daripada DOM maya dan bukannya memaparkan keseluruhan UI aplikasi. Anda boleh memasangnya seperti berikut:

yarn add react-test-renderer

ReactTestUtils dan Enzim

react-dom/test-utils Mengandungi beberapa utiliti ujian yang disediakan oleh pasukan React. Sebagai alternatif, anda boleh menggunakan pakej Enzim yang dikeluarkan oleh Airbnb. Enzim adalah jauh lebih baik daripada ReactTestUtils kerana ia mudah untuk menegaskan, memanipulasi dan mengulangi output komponen React. Kami akan mula menguji menggunakan React utils dan kemudian beralih kepada Enzim.

Untuk memasang Enzim, jalankan arahan berikut.

yarn add enzyme enzyme-adapter-react-16

Tambahkan kod pada src/SetupTests.js.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Bahagian komponen ujian pada halaman create-react-app menyediakan lebih banyak maklumat.

Sediakan aplikasi demo dan atur ujian

Kami akan menulis ujian untuk aplikasi demo ringkas yang memaparkan paparan utama/perincian senarai produk. Anda boleh mencari aplikasi demo dalam repositori GitHub kami. Aplikasi ini terdiri daripada komponen kontena bernama ProductContainer dan tiga komponen pembentangan: ProductList, ProductContainer 的容器组件和三个表示组件组成：ProductList、ProductDetails 和 ProductHeader。

目录结构

.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── ProductContainer.js
│   │   ├── ProductDetails.jsx
│   │   ├── ProductHeader.js
│   │   ├── ProductList.jsx
│   ├── index.js
│   └── style.css

该演示非常适合单元测试和功能测试。您可以单独测试每个组件和/或测试整个产品列表功能。

下载演示后，在 /src/components/ 内创建一个名为 __tests__  的目录。然后，您可以将与此功能相关的所有测试文件存储在 __tests__ 目录中。测试人员通常将其测试文件命名为 .spec.js 或 .test.js，例如，ProductHeader.test.js 或 >ProductHeader.spec.js。

在 React 中编写基本测试

如果尚未创建 ProductHeader.test.js 文件，请创建该文件。我们的测试基本上如下所示：

src/components/__tests__/ProductList.test.js

describe('ProductHeader', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

测试套件以 describe 块开始，这是一个接受两个参数的全局 Jest 函数。第一个参数是测试套件的标题，第二个参数是实际的实现。测试套件中的每个 it() 对应于一个测试或一个规范。测试包含一个或多个检查代码状态的期望。

expects(true).toBeTruthy();

在 Jest 中，期望是返回 true 或 false 的断言。当规范中的所有断言都为真时，就可以说它通过了。否则，测试将失败。

例如，我们创建了两个测试规范。第一个显然应该通过，第二个应该失败。

注意：toBeTruthy() 是预定义的匹配器。在 Jest 中，每个匹配器都会对期望值和实际值进行比较并返回一个布尔值。还有更多可用的匹配器，我们稍后会介绍它们。

运行测试套件

create-react-app 已设置执行测试套件所需的一切。您所需要做的就是运行以下命令：

yarn test

您应该看到类似这样的内容：

要使失败的测试通过，您必须将 toBeTruthy() 匹配器替换为toBeFalsy()。

expects(false).toBeFalsy();

就是这样！

在 Jest 中使用匹配器

如前所述，Jest 使用匹配器来比较值。您可以使用它来检查相等性、比较两个数字或字符串以及验证表达式的真实性。以下是 Jest 中可用的热门匹配器列表。

• toBe();
• toBeNull()
• toBeDefined()
• toBeUndefine()
• toBeTruthy()
• toBeFalsy()
• toBeGreaterThan()

• toBeLesserThan()
• toMatch()
• toContain()

这只是一种味道。您可以在参考文档中找到所有可用的匹配器。

测试 React 组件

首先，我们将为 ProductHeader ProductDetails dan ProductHeader.

Struktur direktori

import React, {Component} from 'react';
   
class ProductHeader extends Component  {
    render() {
        return(
            <h2 id="Product-Listing-Page"> Product Listing Page </h2>
        );
    }
};
export default ProductHeader;

Demo ini sesuai untuk ujian unit dan ujian berfungsi. Anda boleh menguji setiap komponen secara individu dan/atau menguji keseluruhan fungsi senarai produk.

Selepas memuat turun demo, buat direktori bernama 🎜__tests__🎜🎜🎜 di dalam 🎜/src/components/. Anda kemudiannya boleh menyimpan semua fail ujian yang berkaitan dengan ciri ini dalam direktori 🎜__tests__ 🎜. Penguji biasanya menamakan fail ujian mereka 🎜.spec.js🎜 atau 🎜.test.js🎜, sebagai contoh, 🎜ProductHeader.test.js🎜 atau 🎜>ProductHeader.spec.js🎜. 🎜

Menulis ujian asas dalam React

🎜Buat fail 🎜ProductHeader.test.js🎜 jika anda belum melakukannya. Ujian kami pada asasnya kelihatan seperti ini: 🎜 🎜src/components/__tests__/ProductList.test.js🎜

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

🎜Suit ujian bermula dengan blok describe, yang merupakan fungsi Jest global yang menerima dua parameter. Parameter pertama ialah tajuk suite ujian dan parameter kedua ialah pelaksanaan sebenar. Setiap it() dalam suite ujian sepadan dengan ujian atau spesifikasi. Ujian mengandungi satu atau lebih jangkaan yang menyemak keadaan kod. 🎜

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

🎜Dalam Jest, jangkaan ialah dakwaan yang mengembalikan benar atau salah. Sesuatu spesifikasi dikatakan lulus apabila semua penegasan di dalamnya adalah benar. Jika tidak, ujian akan gagal. 🎜🎜🎜 🎜Sebagai contoh, kami mencipta dua spesifikasi ujian. Yang pertama pasti lulus dan yang kedua harus gagal. 🎜 🎜Nota: toBeTruthy() ialah pemadanan yang dipratentukan. Dalam Jest, setiap pemadan membandingkan nilai yang dijangkakan dengan nilai sebenar dan mengembalikan nilai boolean. Terdapat banyak lagi padanan yang tersedia, dan kami akan membincangkannya kemudian. 🎜

Jalankan suite ujian

🎜create-react-app mempunyai semua yang diperlukan untuk melaksanakan set ujian yang disediakan. Apa yang anda perlu lakukan ialah menjalankan arahan berikut: 🎜

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

🎜Anda sepatutnya melihat sesuatu seperti ini: 🎜 🎜🎜🎜Untuk membuat kegagalan Untuk lulus ujian, anda mesti menggantikan penjodoh toBeTruthy() dengan toBeFalsy(). 🎜

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })

🎜Itu sahaja! 🎜

Menggunakan padanan dalam Jest

🎜Seperti yang dinyatakan sebelum ini, Jest menggunakan pemadan untuk membandingkan nilai. Anda boleh menggunakannya untuk menyemak kesamaan, membandingkan dua nombor atau rentetan dan mengesahkan kebenaran ungkapan. Di bawah ialah senarai padanan popular yang terdapat di Jest. 🎜

• toBe();
• toBeNull()
• toBeDefined()
• toBeUndefine()
• toBeTruthy()
• toBeFalsy()
• toBeGreaterThan()🎜🎜
• toBeLesserThan()
• toMatch()
• toContain()

🎜Ini sekadar rasa. Anda boleh menemui semua pemadanan yang tersedia dalam dokumentasi rujukan. 🎜🎜🎜

Menguji komponen React

🎜Pertama, kami akan menulis beberapa ujian untuk komponen ProductHeader. Buka fail 🎜ProductHeader.js🎜 jika ia belum dibuka. 🎜 🎜src/components/ProductHeader.js🎜 rrreee 🎜Adakah anda tertanya-tanya mengapa saya menggunakan komponen kelas di sini dan bukannya komponen fungsi? Sebabnya ialah sukar untuk menguji komponen berfungsi menggunakan ReactTestUtils. Jika anda tertanya-tanya mengapa, perbincangan Stack Overflow ini mempunyai jawapannya. 🎜 🎜Kita boleh menulis ujian menggunakan andaian berikut: 🎜

1. 该组件应呈现 h2 标记。
2. h2 标记应该有一个名为 title 的类。

为了渲染组件并检索相关的 DOM 节点，我们需要 ReactTestUtils。删除虚拟规格并添加以下代码：

src/components/__tests__/ProductHeader.test.js

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

要检查 h2 节点是否存在，我们首先需要将 React 元素渲染到文档中的 DOM 节点中。您可以借助 ReactTestUtils 导出的一些 API 来完成此操作。例如，要渲染我们的 <ProductHeader/> 组件，您可以执行以下操作：

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

然后，您可以借助 findRenderedDOMComponentWithTag('tag-name') 从组件中提取 h2 标签。它检查所有子节点并找到与 tag-name 匹配的节点。

这是整个测试规范。

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

尝试保存它，您的测试运行程序应该向您显示测试已通过。这有点令人惊讶，因为我们没有像前面的示例中那样的 expect() 语句。 ReactTestUtils 导出的大多数方法都内置了期望。在这种特殊情况下，如果测试实用程序无法找到 h2 标记，它将抛出错误并且测试将自动失败。

现在，尝试为第二个测试创建代码。您可以使用 findRenderedDOMcomponentWithClass() 来检查是否有任何带有“title”类的节点。

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })

就是这样！如果一切顺利，您应该会看到绿色的结果。

结论

虽然我们刚刚编写了两个测试规范，但我们已经在此过程中涵盖了很多基础知识。在下一篇文章中，我们将为我们的产品列表页面编写一些完整的测试。我们还将用 Enzyme 替换 ReactTestUtils。为什么？ Enzyme 提供了一个非常易于使用且对开发人员友好的高级界面。请继续关注第二部分！

如果您在任何时候感到困难或需要帮助，请在评论中告诉我们。

Atas ialah kandungan terperinci Tutorial Asas: Menguji Komponen React dengan Jest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!