javascriptreactjsjestjsautomated-teststs-jest

TypeError: (0 , _reactDom.render) is not a function


I'm new to React, so I started with the official tutorial, a tic-tac-toe game. I made some modifications to it, including adding a timestamp to the screen. Now I want to add tests.

I created a file src/tests/Timestamp.test.js which contains this:

import React from 'react';
import {render} from 'react-dom';
import Timestamp from '../components/Timestamp'

describe('Timestamp', () => {
  render(<Timestamp />);
});

When I run npm test I get the error:

  ● Test suite failed to run

    TypeError: (0 , _reactDom.render) is not a function

      4 |
      5 | describe('Timestamp', () => {
    > 6 |   render(<Timestamp />);
        |         ^
      7 | });
      8 |
      9 |

      at src/tests/Timestamp.test.js:6:9
      at Object.<anonymous> (src/tests/Timestamp.test.js:5:1)

Does this mean my import of the render() function is not working? Or am I applying it incorrectly? I've played around with other means of importing and with the rendering of other things, but so far I have not discovered a way to make a working test.


Solution

  • To answer my own question, I ended up with working tests that look like this:

    import {render, screen} from '@testing-library/react';
    import Timestamp from '../components/Timestamp'
    import '@testing-library/jest-dom'
    
    describe('Timestamp', () => {
    
      it('Renders no timestamp', () => {
        render(<Timestamp timestamp={null} />);
        expect(screen.getByText(/No timestamp/i)).toBeInTheDocument()
      })
    
      it('Renders some timestamp', () => {
        render(<Timestamp timestamp={100000} />)
        expect(screen.getByText(/seconds ago/i)).toBeInTheDocument()
      })
    
    });