Are these type of unit tests are going to be helpful in any way?

Question

Below is the sample component & its unit tests

Component

function MyComponent (props) {
  const {notifySelectedPlayer, players} = props
  const [selectedPlayer, setSelectedPlayer] = useState(() => (
    players?.length ? players[0] : null
  ))

  useEffect(() => {
    setSelectedPlayer(players?.length ? players[0] : null)
  }, [players])

  const handlePlayerSelection = useCallback((player) => {
    setSelectedPlayer(player)
    notifySelectedPlayer(player)
  }, [notifySelectedPlayer])

  return (
    <div className='dashboard-container flex-wrap'>
      <PlayerCard
        cardType='basic'
        className='red-border'
        player={selectedPlayer}
      />
      <PlayerList
        className='border-black-2 ellipsis word-wrap'
        players={players}
        listType='basic'
        onSelection={handlePlayerSelection}
      />
    </div>
  )
}

Unit Tests

describe('<MyComponent />', function () {
  let wrapper
  const playerList = [{name: 'A', score: 1, rating: 'a'}, {name: 'B', score: 1, rating: 'b'}]

  beforeEach(function () {
    wrapper = shallow(<MyComponent
      notifySelectedPlayer={callbackSpy}
      players={playerList}
    />)
  })

  it('should have proper props', function () {
    expect(wrapper.props()).to.deep.equal({
      className: 'dashboard-container flex-wrap'
    });
  })

  describe('checking for PlayerCard', function () {
    it('should render <PlayerCard />', function () {
      expect(wrapper.find(PlayerCard)).to.have.lengthOf(1);
    })
  
    it('should render PlayerCard with expected props', function () {
      shouldHaveProps(wrapper.find(PlayerCard), {
        cardType: 'basic',
        className: 'red-border',
        player: playerList[0]
      });
    })
  })

  describe('checking for PlayerList', function () {
    it('should render <PlayerList />', function () {
      expect(wrapper.find(PlayerList)).to.have.lengthOf(1);
    })
  
    it('should render PlayerList with expected props', function () {
      shouldHaveProps(wrapper.find(PlayerList), {
        className: 'border-black-2 ellipsis word-wrap',
        players: players,
        listType: 'basic'
      })
    })
  })

  describe('checking for item selection action on PlayerList', function () {
    beforeEach(function () {
      wrapper.find(PlayerList).simulate('selection', playerList[1])
    })

    shouldHaveProps(wrapper.find(PlayerCard), {
      cardType: 'basic',
      className: 'red-border',
      player: playerList[1]
    })

    it('should invoke notifySelectedPlayer', function () {
      expect(callbackSpy).to.have.callCount(1)
      expect(callbackSpy).to.have.been.calledWith(playerList[1])
    })
  })

  it('should updating players to [] will pass null as player to PlayerCard', function () {
    wrapper.setProps({players: []})
    expect(wrapper.find(PlayerCard).prop('player')).to.equal(null);
  })

  it('should updating players will pass players[0] as player to PlayerCard', function () {
    const updatedPlayers = [{name: 'X', score: 10, rating: 'x'}, {name: 'Y', score: 11, rating: 'b1'}]
    wrapper.setProps({players: updatedPlayers})
    expect(wrapper.find(PlayerCard).prop('player')).to.equal(updatedPlayers[0]);
  })
})

Code Link

Questions

• Are such unit tests serving any purpose
• What they are trying to test
• Will these be able to catch any bugs

Why I'm reluctant to writing such tests

• First writing component or adding behaviour to a component then testing these same code in my unit tests by doing this, am I trying to test React or JS engine

• So this way I'm writing same code twice in two different files in two different coding styles. Saying so because whenever I have to modify some logic or change some default values in the component, everytime same changes need to be done in tests as well

• It takes some manual effort in writing tests & don't think such tests paying anything in return

Note: This question is not about importance of tests/unit-tests, it is about how to write improved unit tests which can add value in return of putting effort.

Answer 1

I think the error message is pretty clear, however you have a few different ways to solve it.

1. Rerun the migrations:

   php artisan migrate:refresh

2. Rolling back your migration:

   php artisan migrate:rollback

When you use PHPStorm you have a database tab on the right side of your window, there you can manually delete the user table and then run php artisan migrate - however I recommend to use 1. or 2. and not do it manually

Answer 2

Just Run

php artisan migrate:rollback