Mappers

badWay.jsx

// Not the best way to write components and tests, having different names for same data
const UserProfile = ({ name, lastName, birthDate, userEvaluation }) => {
  const fullName = `${name} ${lastName}`
  ...
}

describe('UserProfile', () => {
  it('renders with correct props', () => {
    const MOCK_USER = {
      name: 'Abner', 
      lastName: 'Alves', 
      birthDate: '31/02/3019', 
      userEvaluation: 'topster'
    };
    
    const wrapper = shallow(<UserProfile {...MOCK_USER} />);
    ...
  })
})

// But if the API response doesn't have the same shape of our mock, our component will stop working

describe('UserProfile', () => {
  it('renders with correct props', () => {
    const ACTUAL_API_RESPONSE = {
      userName: "Talysson",
      userLastName: "Cassiano",
      birth: "01/04/1992",
      evaluation: {
        average: 4.5,
        total: 20,
      }
    }
    
    const wrapper = shallow(<UserProfile {...ACTUAL_API_RESPONSE} />);
    ...
  })
})