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.
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()
})
});