# webpack react testing

"scripts": {
  "jest-test": "jest -c jest.config.js --watch"
}

module.export = {
  roots: ['<rootDir>/src'],
  transform: {
    '\\.(js|jsx)?$': 'babel-jest',
  },
  testMatch: ['<rootDir>/src/**/>(*.)test.{js, jsx}'], // finds test
  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
  testPathIgnorePatterns: ['/node_modules/', '/public/'],
  setupFilesAfterEnv: [
    'jest-dom/extend-expect',
    '@testing-library/react/cleanup-after-each'
  ] // setupFiles before the tests are ran
};

import React from 'react';

const Profile = ({ username, name }) => {
  return (
      <h1>Hi {username} {name}!</h1>
  );
};

export default Profile;

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

afterEach(cleanup)

describe('This will test MyComponent', () => {
  test('renders message', () => {
    const {getByText} = render( <Profile username="Alejandro" name="Roman" /> )

    // as suggested by Giorgio Polvara a more idiomatic way:
    expect(getByText('Hi Alejandro Roman!'))
  })
})