Aplikacje React

React służy przede wszystkim do budowy interfejsów użytkownika z komponentów. Dzięki integracji z bibliotekami takimi jak Redux (centralny magazyn stanu aplikacji) czy Axios (komunikacja w internecie) można uzyskać kompletn rozwiązanie: aplikację webową (frontend). Jednak tworzenie bardziej złożonych aplikacji tego typu nie jest rzeczą banalną. W tym rozdziale poruszonych zostanie kilka problemów, jakie musi rozwiązać programista w tego typu projekcie.

Testowanie

Mamy wiele narzędzi do testowania aplikacji React. To bogactwo utrudnia ich wybór i stosowanie. Poniżej krótki przegląd:

Mocha / Jasmine

Są to narzędzia uruchamiania testów (runner):

describe/it/beforeEach: funkcje mocha / jaśminu służą do organizacji testu.

  • describe → opisuje funkcję
  • it → Określa jakie są określone warunki. Funkcjonuje wewnątrz opisu
  • beforeEach → Konfiguracja testów przed uruchomieniem

Przykład testu:

describe "Strawberry"
  - it "is red"
    - expect(strawberry.color).to.be('red')
 - it "a type of fruit"
    - expect(strawberry.type).to.be('fruit)

Enzyme

Narzędzie do testowania JavaScriptu dla React, które ułatwia potwierdzenie, manipulowanie i przechodzenie przez komponenty React.

Może być używany do płytkiego renderowania komponentów React lub sprawdzenia, czy komponenty mają określone dzieci lub czy mają określone własności.

import MyComponent from ‘./MyComponent’;
import Foo from ‘./Foo’;

describe(‘<MyComponent />’, () => {
  it(‘renders three <Foo /> components’, () => {
    const wrapper = shallow(<MyComponent foo=’bar’ />);
    expect(wrapper.find(Foo)).to.have.length(3);
    expect(wrapper.props().foo).to.equal(‘bar’);
  });
});

Zobacz też: