darde

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import App from './App';

describe('App', () => {
  describe('when the fetch operation is pending', () => {
    it('shows a loading span', () => {
      const { getByText } = render(<App />);

      expect(getByText(/loading/i)).toBeInTheDocument();

darde

import fetchPosts from './fetchPosts';
import mockedAxios from 'axios';

describe('fetchPosts', () => {
  it('fetch the posts', async () => {
    const posts = await fetchPosts();

    const expectedResponse = [
      {
        id: 1,

darde

export default {
  get: jest.fn(() => Promise.resolve({
    data: [
    {
      id: 1,
      title: 'This is a tech post',
    },
    {
      id: 2,
      title: 'Post about testing code',

darde

import axios from 'axios';

const BASE_URL = 'https://jsonplaceholder.typicode.com/posts';

export default async () => {
  const response = await axios.get(BASE_URL);

  return response.data;
}

darde

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import fetchPosts from './services/fetchPosts';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    let mounted = true;

darde

import React from 'react';
import { translate } from 'react-i18next';
import photo from './photo.jpg';

const Home = ({ t }) => (
  <div className='preview'>
    <h1>{t('home.title')}</h1>
    <div>
      <figure className='center'>
        <img src={photo} alt={t('home.figure.alt')} />

darde

import React from 'react';
import photo from './photo.jpg';

const Home = () => (
  <div className='preview'>
    <h1>Lighthouses</h1>
    <div className="cover">
      <figure className='center'>
        <img src={photo} alt="Lighthouse picture"/>
      </figure>

darde

import React from 'react';
import AppProvider from './components/context/AppProvider';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import Router from './components/Router';
import Toolbar from './components/Toolbar';
import './styles/styles.css';

const App = () => (
  <div className='wrapper'>

darde

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { pt, en } from './locales';

const options = {
  interpolation: {
    escapeValue: false, // not needed for react!!
  },

  debug: true,

darde

{
  "en": {
    "title": "Lighthouses",
    "content": "Know the most beautiful lighthouses of the world.",
    "figure": {
      "alt": "Lighthouse picture"
    }
  }
}