|
1 | 1 | ---
|
2 | 2 | id: shallow-renderer
|
3 |
| -title: Shallow Renderer |
| 3 | +title: Renderizzatore Shallow |
4 | 4 | permalink: docs/shallow-renderer.html
|
5 | 5 | layout: docs
|
6 | 6 | category: Reference
|
7 | 7 | ---
|
8 | 8 |
|
9 |
| -**Importing** |
| 9 | +> **Nota sulla traduzione:** |
| 10 | +> |
| 11 | +> La definizione inglese `Shallow Renderer` si traduce letteralmente in `Renderizzatore Superficiale`, dato che il modulo è chiamato `shallow`, abbiamo deciso di non tradurlo di seguito. |
| 12 | +
|
| 13 | +**Importazione** |
10 | 14 |
|
11 | 15 | ```javascript
|
12 | 16 | import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
|
13 |
| -var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm |
| 17 | +var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 con npm |
14 | 18 | ```
|
15 | 19 |
|
16 |
| -## Overview {#overview} |
| 20 | +## Panoramica {#overview} |
17 | 21 |
|
18 |
| -When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM. |
| 22 | +Quando scriviamo unit test per React, la renderizzazione shallow può tornare molto utile. Essa permette di renderizzare un componente "ad un livello di profondità" e di asserire fatti riguardo cosa viene ritornato dal suo metodo `render`. Il vantaggio risiede nel fatto che non dobbiamo preoccuparci del comportamento dei componenti figli, i quali non vengono istanziati o renderizzati. Non è richiesto nemmeno un DOM. |
19 | 23 |
|
20 |
| -For example, if you have the following component: |
| 24 | +Ad esempio, dato il seguente componente: |
21 | 25 |
|
22 | 26 | ```javascript
|
23 |
| -function MyComponent() { |
| 27 | +function MioComponente() { |
24 | 28 | return (
|
25 | 29 | <div>
|
26 |
| - <span className="heading">Title</span> |
27 |
| - <Subcomponent foo="bar" /> |
| 30 | + <span className="testata">Titolo</span> |
| 31 | + <SottoComponente foo="bar" /> |
28 | 32 | </div>
|
29 | 33 | );
|
30 | 34 | }
|
31 | 35 | ```
|
32 | 36 |
|
33 |
| -Then you can assert: |
| 37 | +Possiamo asserire: |
34 | 38 |
|
35 | 39 | ```javascript
|
36 | 40 | import ShallowRenderer from 'react-test-renderer/shallow';
|
37 | 41 |
|
38 |
| -// in your test: |
| 42 | +// nel tuo test: |
39 | 43 | const renderer = new ShallowRenderer();
|
40 |
| -renderer.render(<MyComponent />); |
| 44 | +renderer.render(<MioComponente />); |
41 | 45 | const result = renderer.getRenderOutput();
|
42 | 46 |
|
43 | 47 | expect(result.type).toBe('div');
|
44 | 48 | expect(result.props.children).toEqual([
|
45 |
| - <span className="heading">Title</span>, |
46 |
| - <Subcomponent foo="bar" /> |
| 49 | + <span className="testata">Titolo</span>, |
| 50 | + <SottoComponente foo="bar" /> |
47 | 51 | ]);
|
48 | 52 | ```
|
49 | 53 |
|
50 |
| -Shallow testing currently has some limitations, namely not supporting refs. |
| 54 | +Il testing shallow, attualmente, ha alcune limitazioni quali il mancato supporto ai `refs`. |
51 | 55 |
|
52 |
| -> Note: |
| 56 | +> Nota: |
53 | 57 | >
|
54 |
| -> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality. |
| 58 | +> Ti raccomandiamo inoltre di dare uno sguardo alle [API Shallow Rendering](https://airbnb.io/enzyme/docs/api/shallow.html) di Enzyme. Ti offrono una migliore API di più alto livello attorno alla stessa funzionalità. |
55 | 59 |
|
56 |
| -## Reference {#reference} |
| 60 | +## Riferimento {#reference} |
57 | 61 |
|
58 | 62 | ### `shallowRenderer.render()` {#shallowrendererrender}
|
59 | 63 |
|
60 |
| -You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output. |
| 64 | +Puoi pensare allo _shallowRenderer_ come ad un "posto" nel quale renderizzare i componenti che stai testando, dal quale puoi estrarre l'output del componente. |
61 | 65 |
|
62 |
| -`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented. |
| 66 | +`shallowRenderer.render()` è simile a [`ReactDOM.render()`](/docs/react-dom.html#render) ma non richiede un DOM e renderizza ad un solo livello di profondità. Ciò significa che potrai testare i componenti in isolamento rispetto a come sono implementati i componenti figli. |
63 | 67 |
|
64 | 68 | ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
|
65 | 69 |
|
66 |
| -After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output. |
| 70 | +Quando `shallowRenderer.render()` è stato chiamato, puoi usare `shallowRenderer.getRenderOutput()` per ottenere l'output renderizzato in modo "superficiale". |
67 | 71 |
|
68 |
| -You can then begin to assert facts about the output. |
| 72 | +Potrai allora asserire fatti riguardo ad esso nei tuoi test. |
0 commit comments