Update testing setup to migrate to new @testing-library packages

The awesome "react-testing" libraries moved to the `@testing-library`
package scope which required some changes to be done to migrate the test
setup:

1. Updated all package import paths, e.g. `react-testing-library` to
   `@testing-library/react`.
2. Removed the deprecated import of the `cleanup-after-each` function:
   "The module `@testing-library/react/cleanup-after-each` has been
   deprecated and no longer does anything (it is not needed). You no
   longer need to import this module and can safely remove any import
   or configuration which imports this module."
3. Updated failing snapshots were only the class name of
   "styled components" changed. This is because the generated class
   names are now starting with a counter of `0` instead of `1` that
   caused only changes like this:
   ```diff
   -.c1
   +.c0
   ```

GH-183

test/__utils__/renderWithTheme.jsx

@@ -8,7 +8,7 @@
  */
 
 import React from "react";
-import { render } from "react-testing-library";
+import { render } from "@testing-library/react";
 
 import Root from "containers/core/Root";
 

test/components/atoms/core/Button/Button.test.jsx

@@ -8,7 +8,7 @@
  */
 
 import React from "react";
-import { waitForElement } from "react-testing-library";
+import { waitForElement } from "@testing-library/react";
 
 import { renderWithTheme } from "nord-docs-test-utils";
 import Button from "atoms/core/Button";

test/components/atoms/core/Button/__snapshots__/Button.test.jsx.snap

@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`logical behavior renders external URLs with \`href\` prop 1`] = `
-.c1 {
+.c0 {
   color: inherit;
   cursor: pointer;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c1:active,
-.c1:focus,
-.c1:hover,
-.c1:visited {
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
   outline: none;
 }
 
-.c0 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -45,28 +45,28 @@ exports[`logical behavior renders external URLs with \`href\` prop 1`] = `
   transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   cursor: pointer;
 }
 
-.c0:active,
-.c0:focus {
+.c1:active,
+.c1:focus {
   outline: none;
 }
 
-.c0:disabled {
+.c1:disabled {
   cursor: not-allowed;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   background-color: rgba(236,239,244,0.65);
 }
 
-.c0:active:not(:disabled) {
+.c1:active:not(:disabled) {
   background-color: rgba(236,239,244,0.85);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(76,86,106,0.4);
 }
 
@@ -80,21 +80,21 @@ exports[`logical behavior renders external URLs with \`href\` prop 1`] = `
 `;
 
 exports[`logical behavior renders external URLs with \`to\` prop 1`] = `
-.c1 {
+.c0 {
   color: inherit;
   cursor: pointer;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c1:active,
-.c1:focus,
-.c1:hover,
-.c1:visited {
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
   outline: none;
 }
 
-.c0 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -124,28 +124,28 @@ exports[`logical behavior renders external URLs with \`to\` prop 1`] = `
   transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   cursor: pointer;
 }
 
-.c0:active,
-.c0:focus {
+.c1:active,
+.c1:focus {
   outline: none;
 }
 
-.c0:disabled {
+.c1:disabled {
   cursor: not-allowed;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   background-color: rgba(236,239,244,0.65);
 }
 
-.c0:active:not(:disabled) {
+.c1:active:not(:disabled) {
   background-color: rgba(236,239,244,0.85);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(76,86,106,0.4);
 }
 
@@ -159,21 +159,21 @@ exports[`logical behavior renders external URLs with \`to\` prop 1`] = `
 `;
 
 exports[`logical behavior renders inernal URLs with \`href\` prop 1`] = `
-.c1 {
+.c0 {
   color: inherit;
   cursor: pointer;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c1:active,
-.c1:focus,
-.c1:hover,
-.c1:visited {
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
   outline: none;
 }
 
-.c0 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -203,28 +203,28 @@ exports[`logical behavior renders inernal URLs with \`href\` prop 1`] = `
   transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   cursor: pointer;
 }
 
-.c0:active,
-.c0:focus {
+.c1:active,
+.c1:focus {
   outline: none;
 }
 
-.c0:disabled {
+.c1:disabled {
   cursor: not-allowed;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   background-color: rgba(236,239,244,0.65);
 }
 
-.c0:active:not(:disabled) {
+.c1:active:not(:disabled) {
   background-color: rgba(236,239,244,0.85);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(76,86,106,0.4);
 }
 
@@ -238,21 +238,21 @@ exports[`logical behavior renders inernal URLs with \`href\` prop 1`] = `
 `;
 
 exports[`logical behavior renders inernal URLs with \`to\` prop 1`] = `
-.c1 {
+.c0 {
   color: inherit;
   cursor: pointer;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c1:active,
-.c1:focus,
-.c1:hover,
-.c1:visited {
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
   outline: none;
 }
 
-.c0 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -282,28 +282,28 @@ exports[`logical behavior renders inernal URLs with \`to\` prop 1`] = `
   transition: background-color 200ms ease-in, border-color 200ms ease-in, box-shadow 200ms ease-in, color 200ms ease-in;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   cursor: pointer;
 }
 
-.c0:active,
-.c0:focus {
+.c1:active,
+.c1:focus {
   outline: none;
 }
 
-.c0:disabled {
+.c1:disabled {
   cursor: not-allowed;
 }
 
-.c0:hover:not(:disabled) {
+.c1:hover:not(:disabled) {
   background-color: rgba(236,239,244,0.65);
 }
 
-.c0:active:not(:disabled) {
+.c1:active:not(:disabled) {
   background-color: rgba(236,239,244,0.85);
 }
 
-.c0:disabled {
+.c1:disabled {
   color: rgba(76,86,106,0.4);
 }