Testowanie aplikacji React.js — podstawy Enzyme

[type-of-web-komentarze[bot]]

Testowanie aplikacji React.js — podstawy Enzyme

Testowanie aplikacji to rzecz ważna. Do tej pory jednak nie wspomniałem ani słowem o testowaniu React.js. Czas najwyższy to zrobić! I od razu wrzucam Cię na głęboką wodę — użyjesz React.js i Enzyme — przemiłej biblioteki do testowania komponentów.

https://typeofweb.com/testowanie-aplikacji-react-js-podstawy-enzyme

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Giemza		2018-02-20 10:23

Brak linku do następnej części

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-20 10:33

Cache? :P

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Rafał Giemza		2018-02-20 10:44

chyba cache, bo teraz mam do 16 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	BlueMan	http://www.blueman.pl/	2019-01-04 11:27

Mogłeś od razu pod Travisa podpiąć repo ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-06 22:18

Czy ma ktoś pomysł, dlaczego przy każdym teście wyskakuje mi "ReferenceError: UsersList is not defined"? Kod mam skopiowany żywcem z przykładu Michała.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-07 08:40

A jak importujesz UsersList do testu?
https://github.com/mmiszy/typeofweb-kurs-react/blob/595085df6cc37f6287fb6b814b79bfb2336b1429/src/UsersList.test.js#L3

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-07 19:49

import App from './App'; I to raczej przechodzi, bo test z inputem jest passed

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-07 20:02

Błąd mówi konkretnie o UsersList, więc najprawdopodobniej zapomniałaś zaimportować ten komponent.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-07 20:40

Ok, zadziałało, nie wiedziałam, że muszę wyodrębnić UsersList do nowego pliku (wszystko miałam w App.js). Dzięki za pomoc!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-25 01:54

Michał, czemu używasz "it" zamiast "test"? W różnych źródłach wiedziałem i jedno i drugie. Z dokumentacji Jest wynika, że nie ma pomiędzy nimi różnicy, więc zastanawiam się, czemu używa się jednego lub drugiego? Dzięki.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-02-25 19:30

Zwyczajowo w TDD/BDD używa się "describe" i "it" oraz zaczyna nazwy testów, aby testy czytały się jak ładne opowiadanie ;)

Describe: MyComponent
it should render
it should show a list of users

albo

Describe: MyComponent
it renders
it shows a list of users

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jurko		2019-02-27 13:32

dzięki. faktycznie czyta się to lepiej.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	jundymek		2019-04-07 15:37

Hej. Michał. Na wstępie napiszę tylko, że odwalasz kawał świetnej roboty. Kurs jest naprawdę świetny. Mam pytanie odnośnie importowania componentów w testach. Próbując odpalić twoje testy zauważyłem, że przy mojej strukturze projektu importowanie wywalało testy. Po prostu moja aplikacja ma componenty rozdzielone na pliki Home.js oraz UserList.js. W moim przypadku poprawnie napisane testy to:

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
import UserList from './components/UserList';
import Home from './components/Home';

it('renders without crashing', () => {
shallow();
});

it('includes input', () => {
const app = shallow();
expect(app.containsMatchingElement()).toEqual(true)
});

it('includes UserList', () => {
const app = shallow();
expect(app.containsMatchingElement()).toEqual(true)
});


Da się jakoś wymusić, żeby aplikacja testowała componenty od najwyższego poziomu, schodząc w dół? Aplikacja a App.js wygląda tak:

import React, { Component } from 'react';
import Home from '../src/components/Home';

class App extends Component {
render() {
return (

);

}
}

export default App;

czyli teoretycznie input oraz UserList znajdują się w App (są one po prostu zagnieżdżone w Home.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krzysztof Dziekiewicz		2019-12-17 23:00

Miałem błąd: "Cannot find module 'react' from 'ReactSixteenAdapter.js'"
Okazało się, że przyczyną były brakujące pozycje w package.json.
Warto zobaczyć, czy ma się wszystkie zależności z https://github.com/mmiszy/typeofweb-kurs-react/blob/part-2/package.json
Ja uzupełniłem:
"enzyme": "3.3.0",
"enzyme-adapter-react-16": "1.1.1",
"jest-enzyme": "4.0.2",

"react-test-renderer": "16.12.0"

Samo npm install nie wystarczy

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2020-05-26 16:10

Mam problem z tym.

Pierwszy test przechodzi poprawnie
it('renders without crashing', () => {
shallow();
});

Drugi test nie przechodzi
it('includes input', () => {
const app = shallow();
expect(app.containsMatchingElement()).toEqual(true)
});

Komunikat:

expect(received).toEqual(expected) // deep equality Expected: true Received: false

... ale gdy zamienię shallow na mount to test jest ok.

Trzeci test nie przechodzi ani przy shallow ani przy mount
it('includes input', () => {
const app = mount();
expect(app.containsMatchingElement()).toEqual(true)
});

Komunikat:

ReferenceError: UsersList is not defined

Oczywiście podejrzewam, że muszę jakoś zaimportować UsersList, ale to tak na szybko piszę moje spostrzeżenie.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2020-05-26 16:18

import UsersList from './App';
:)

Chyba jednak nie o to chodziło :(

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2020-05-28 23:02

Odpowiem sam sobie. Może komuś się kiedyś przyda.

App.js:
export { UsersList };
export default App;

App.test.js:
import App from './lessons/App';
import { UsersList } from './lessons/App';

 
 

Komentarz zaimportowany z WordPressa