We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 DillərGitHub

Test Renderer

İdxal Etmə

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // npm ilə ES5

İcmal

Bu paket, React komponentlərini Javascript obyektlərinə render etmək üçün, DOM və ya nativ mobil mühitindən asılı olmayan React renderer-i təmin edir.

Bu paket, React DOM və ya React Native komponentinin, brauzer və ya jsdom olmadan render etdiyi platforma görünüş iyerarxiyasının snəpşotunu asan formada çəkməyə imkan yaradır.

Məsələn:

import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(testRenderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

JSON ağacının kopiyasını yadda saxlayıb testlərdə bu ağacın dəyişdiyini yoxlamaq üçün Jest-in snəpşot test xüsusiyyətindən istifadə edə bilərsiniz. Əlavə məlumat üçün bura baxın.

Həmçinin siz nəticənin üzərindən keçib lazım olan nodları tapa bilər və bu nodlar üzərində iddialarınızı yoxlaya bilərsiniz.

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">Salam</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">Sub</p>
  );
}

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;

expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

TestRenderer

TestRenderer instansiyası

TestInstance

Arayış

TestRenderer.create() 

TestRenderer.create(element, options);

Göndərilən React elementi ilə TestRenderer instansiyası yaradın. Bunun real DOM-dan istifadə etməməsinə baxmayaraq, iddialarımızı yoxlaya bilmək üçün komponent ağacı yenə də bütünlüklə yaddaşa render edilir. Qaytarılan instansiyanın funksiya və parametrləri aşağıda göstərilib.

TestRenderer.act() 

TestRenderer.act(callback);

TestRenderer.act, react-dom/test-utils-də olan act() köməkçisi kimi iddialarınızı yoxlamaq üçün komponentləri hazırlayır. act()-in bu versiyasını TestRenderer.create və testRenderer.update çağırışlarını əhatə etmək üçün işlədin.

import {create, act} from 'react-test-renderer';
import App from './app.js'; // Test edilən komponent

// komponenti render et
let root; 
act(() => {
  root = create(<App value={1}/>)
});


// ana komponentin üzərində iddaları yoxlayın
expect(root.toJSON()).toMatchSnapshot();

// fərqli proplar ilə yeniləyin
act(() => {
  root.update(<App value={2}/>);
})

// ana komponentin üzərində iddaları yoxlayın
expect(root.toJSON()).toMatchSnapshot();

testRenderer.toJSON() 

testRenderer.toJSON()

Render edilmiş ağacı təmsil edən obyekti qaytarır. Render edilmiş ağac yalnız <div> və ya <View> kimi platform-spesifik nodlardan ibarətdir. Bu ağacda istifadəçi tərəfindən yaranmış komponentlər olmur. Snəpşot testi üçün faydalıdır.

testRenderer.toTree() 

testRenderer.toTree()

Render edilmiş ağacı təmsil edən obyekti qaytarır. toJSON()-dan fərqli olaraq bu funksiya daha ətraflıdır və istifadəçi tərəfindən yaranmış komponentləri də obyektə daxil edir. Siz test renderer üzərində öz test kitabxananızı yazmırsınızsa, bu funksiya sizə lazım deyil.

testRenderer.update() 

testRenderer.update(element)

Yaddaşda olan ağacı yeni ana elementi ilə yenidən render edin. Bu funksiya React-in ana komponentdə yenilənməsini simulyasiya edir. Əgər yeni elementin tipi və açarı keçmiş elementinki ilə eynidirsə ağac yenilənəcək. Əks halda yeni ağac mount olunacaq.

testRenderer.unmount() 

testRenderer.unmount()

Yaddaşda olan ağacı unmount edib uyğun lifecycle hadisələrini çağırın.

testRenderer.getInstance() 

testRenderer.getInstance()

Əgər mümkündürsə, ana elementin instansiyasını qaytarın. Əgər ana element funksiya komponentidirsə bu funksiya işləməyəcək. Çünki funksiya komponentlərinin instansiyaları olmur.

testRenderer.root 

testRenderer.root

Ağacda olan spesifik nodlar haqqında iddiaları yaratmaq üçün faydalı olan ana “test instansiya” obyektini qaytarın. Siz bu instansiya ilə dərində olan digər “test instansiyalarını” tapa bilərsiniz.

testInstance.find() 

testInstance.find(test)

test(testInstance) true qaytaran tək test instansiyasını tapın. Əgər test(testInstance) yalnız tək instansiya üçün true qaytarmırsa bu funksiya istisna atacaq.

testInstance.findByType() 

testInstance.findByType(type)

Təmin edilən type ilə tək test instansiyasını tapın. Əgər təmin edilən type ilə yalnız tək instansiya yoxdursa bu funksiya istisna atacaq.

testInstance.findByProps() 

testInstance.findByProps(props)

Təmin edilən props ilə tək test instansiyasını tapın. Əgər təmin edilən props ilə yalnız tək instansiya yoxdursa, bu funksiya istisna atacaq.

testInstance.findAll() 

testInstance.findAll(test)

test(testInstance) true qaytaran bütün test instansiyalarını tapın.

testInstance.findAllByType() 

testInstance.findAllByType(type)

Təmin edilən type ilə bütün test instansiyalarını tapın.

testInstance.findAllByProps() 

testInstance.findAllByProps(props)

Təmin edilən props ilə bütün test instansiyalarını tapın.

testInstance.instance 

testInstance.instance

Göstərilən test instansiyasına uyğun olan komponent. Funksiya komponentlərinin instansiyaları olmadığından bu yalnız sinif komponentləri üçün mövcuddur. Verilən komponentin this dəyəri ilə uyğundur.

testInstance.type 

testInstance.type

Test instansiyasının komponent tipi. Məsələn, <Button /> komponentinin tipi Button-dır.

testInstance.props 

testInstance.props

Test instansiyasına uyğun gələn proplar. Məsələn, <Button size="small" /> komponentinin {size: 'small'} propları var.

testInstance.parent 

testInstance.parent

Test instansiyasının ana test instansiyası.

testInstance.children 

testInstance.children

Test instansiyasının uşaq test instansiyaları.

İdeyalar

Xüsusi mok refləri düzəltmək üçün TestRenderer.create-ə createNodeMock funksiyasını göndərə bilərsiniz. createNodeMock cari elementi qəbul edir və mok ref obyekti qaytarır. Bu ref-lərdən asılı olan komponentləri test etmək üçün faydalıdır.

import TestRenderer from 'react-test-renderer';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = null;
  }
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return <input type="text" ref={el => this.input = el} />
  }
}

let focused = false;
TestRenderer.create(
  <MyComponent />,
  {
    createNodeMock: (element) => {
      if (element.type === 'input') {
        // fokus funksiyasını mok edin
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);
Is this page useful?Bu səhifəni redaktə edin