From f3b78dd908bde4604ce0ac137e4c7e4280b8a6af Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 18 Mar 2019 15:27:27 +0000 Subject: [PATCH 1/3] shallow-renderer: done Signed-off-by: Alessandro De Blasis --- content/docs/addons-shallow-renderer.md | 48 +++++++++++++------------ 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index 7b7f29f3c..2aa3e69bb 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -1,68 +1,72 @@ --- id: shallow-renderer -title: Shallow Renderer +title: Renderizzatore Shallow permalink: docs/shallow-renderer.html layout: docs category: Reference --- -**Importing** +#### Nota sulla traduzione + +> La definizione inglese `Shallow Renderer` si traduce letteralmente in `Renderizzatore Superficiale`, dato che il modulo è chiamato `shallow`, abbiamo deciso di non tradurlo di seguito. + +**Importazione** ```javascript import ShallowRenderer from 'react-test-renderer/shallow'; // ES6 -var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm +var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 con npm ``` -## Overview {#overview} +## Panoramica {#overview} -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. +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. -For example, if you have the following component: +Ad esempio, dato il seguente componente: ```javascript -function MyComponent() { +function MioComponente() { return (
- Title - + Titolo +
); } ``` -Then you can assert: +Possiamo asserire: ```javascript import ShallowRenderer from 'react-test-renderer/shallow'; -// in your test: +// nel tuo test: const renderer = new ShallowRenderer(); -renderer.render(); +renderer.render(); const result = renderer.getRenderOutput(); expect(result.type).toBe('div'); expect(result.props.children).toEqual([ - Title, - + Titolo, + ]); ``` -Shallow testing currently has some limitations, namely not supporting refs. +Il testing shallow, attualmente, ha alcune limitazioni quali il mancato supporto ai `refs`. -> Note: +> Nota: > -> 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. +> 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à. -## Reference {#reference} +## Riferimento {#reference} ### `shallowRenderer.render()` {#shallowrendererrender} -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. +Puoi pensare allo _shallowRenderer_ come ad un "posto" nel quale renderizzare i componenti che stai testando, dal quale puoi estrarre l'output del componente. -`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. +`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. ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput} -After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output. +Quando `shallowRenderer.render()` è stato chiamato, puoi usare `shallowRenderer.getRenderOutput()` per ottenere l'output renderizzato in modo "superficiale". -You can then begin to assert facts about the output. +Potrai allora asserire fatti riguardo ad esso nei tuoi test. From 6daefaa65f5d4a8e439995d26697eee11ce66e40 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 18 Mar 2019 15:28:08 +0000 Subject: [PATCH 2/3] quote Signed-off-by: Alessandro De Blasis --- content/docs/addons-shallow-renderer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index 2aa3e69bb..2823ad8f0 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -6,8 +6,8 @@ layout: docs category: Reference --- -#### Nota sulla traduzione - +> **Nota sulla traduzione:** +> > La definizione inglese `Shallow Renderer` si traduce letteralmente in `Renderizzatore Superficiale`, dato che il modulo è chiamato `shallow`, abbiamo deciso di non tradurlo di seguito. **Importazione** From 8da1d14ab43ce6770aaaa90333debf5e50047585 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Mon, 18 Mar 2019 15:30:32 +0000 Subject: [PATCH 3/3] nav Signed-off-by: Alessandro De Blasis --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 90ce6e124..35c913b82 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -97,7 +97,7 @@ - id: test-utils title: Test Utilities - id: shallow-renderer - title: Shallow Renderer + title: Renderizzatore Shallow - id: test-renderer title: Test Renderer - id: javascript-environment-requirements