React Testing Library Tips

Installation

yarn add --dev @testing-library/react

SyntaxError: Cannot use import statement outside a module

https://stackoverflow.com/questions/58613492/how-to-resolve-cannot-use-import-statement-outside-a-module-in-jest

Install jest, ts-jest and babel-jest:

npm i jest ts-jest babel-jest

babel.config.js (only used by jest)

module.exports = {presets: ['@babel/preset-env']}

jest.config.js

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
  }
};

Test if an element has focus

it('should focus on name input when component mounts', () => {
  renderApollo(<Add />)

  expect(screen.getByRole('textbox')).toHaveFocus()
})

Test if an element has value of

it('should have a default quantity of 1', () => {
  renderApollo(<Add />)

  expect(screen.getByRole('spinbutton')).toHaveValue(1)
})