React unit test is failed because of keep all dom tests - reactjs

Question

I have a note list component that is connected to redux and render a list of items. I create 2 unit test for testing component for when component have list and when is empty. A first unit test no notes on the list is a success but when testing having multiple notes on the list it keeps the previous unit test dom and the test is failed.
import React from 'react';
import '#testing-library/jest-dom/extend-expect';
import { render, screen } from '#testing-library/react';
import configureStore from 'redux-mock-store';
import NoteList from '../../../../../src/components/note/note-list-children/NoteList';
const tasks = [
{
title: 'e2e',
content: 'Learning E2E',
date: '2020/03/05',
id: 'evRFE5i5',
done: false,
},
{
title: 'unit',
content: 'Learning Unit Test',
date: '2020/03/04',
id: 'FTSTSrn7',
done: false,
},
];
describe('No notes on list.', () => {
const mockStore = configureStore();
const initialState = {
tasksReducer: [],
mainReducer: {},
};
const store = mockStore(initialState);
beforeEach(() => {
render(<NoteList store={store} tasks={[]} />);
});
it('Should having no notes on the list (showing a proper message).', () => {
expect(screen.getByText(/No notes yet./i)).toBeTruthy();
});
});
describe('Having multiple notes on the list.', () => {
beforeEach(() => {
const mockStore = configureStore();
const initialState = {
tasksReducer: [],
mainReducer: {},
};
const store = mockStore(initialState);
render(<NoteList store={store} tasks={tasks} />);
});
it('Should not showing empty massege for note lists', () => {
screen.debug();
expect(screen.queryByText(/No notes yet./i)).not.toBeInTheDocument();
});
});
Note list component
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
// Redux
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { deleteTask, doneTask } from '../../../redux/actions/actionTasks';
import { activeMain } from '../../../redux/actions/actionMain';
// Materail UI
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '#material-ui/core/ListItemSecondaryAction';
import ListItemText from '#material-ui/core/ListItemText';
import Checkbox from '#material-ui/core/Checkbox';
import IconButton from '#material-ui/core/IconButton';
import DeleteIcon from '#material-ui/icons/Delete';
import EditIcon from '#material-ui/icons/Edit';
// Component
import DeleteNotes from './DeleteNotes';
const NoteList = props => {
const { tasks, active } = props;
const handleActiveMain = item => {
props.activeMain('singleNote', item.title, item.content, item.date, item.id, item.done);
};
const handleToggle = item => {
if (item.done === false) {
props.doneTask(true, item.id);
} else {
props.doneTask(false, item.id);
}
};
const handleDeleteNote = id => {
props.deleteTask(id);
if (active.id == id || tasks.length === 1) {
props.activeMain('create');
}
};
const handleEditNote = item => {
props.activeMain('edit', item.title, item.content, item.date, item.id, item.done);
};
return (
<div className="list-tasks" data-test="note-list">
<List className="note-list">
{tasks.length ? (
tasks.map(item => (
<ListItem ContainerProps={{ 'data-test': 'note-item' }} key={item.id} dense button>
<ListItemIcon>
<Checkbox
edge="start"
onClick={() => handleToggle(item)}
checked={item.done === true}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': item.id, 'data-test': 'note-check' }}
/>
</ListItemIcon>
<Link href="/" as={process.env.BACKEND_URL + '/'}>
<ListItemText
onClick={() => handleActiveMain(item)}
className={item.done === true ? 'done' : ''}
id={item.id}
primary={<span data-test="note-title">{item.title}</span>}
secondary={<span data-test="note-date">{item.date}</span>}
/>
</Link>
<ListItemSecondaryAction>
<IconButton
onClick={() => handleDeleteNote(item.id)}
edge="end"
aria-label="delete"
>
<DeleteIcon data-test="note-delete" />
</IconButton>
<Link
href={`/edit?id=${item.id}`}
as={`${process.env.BACKEND_URL}/edit?id=${item.id}`}
>
<IconButton onClick={() => handleEditNote(item)} edge="end" aria-label="edit">
<EditIcon data-test="note-edit" />
</IconButton>
</Link>
</ListItemSecondaryAction>
</ListItem>
))
) : (
<p data-test="no-note-yet">No notes yet.</p>
)}
</List>
{tasks.some(item => item.done === true) === true && <DeleteNotes selectedNotes={tasks} />}
</div>
);
};
NoteList.propTypes = {
active: PropTypes.object.isRequired,
tasks: PropTypes.array.isRequired,
deleteTask: PropTypes.func.isRequired,
activeMain: PropTypes.func.isRequired,
doneTask: PropTypes.func.isRequired,
};
const mapDispatchToProps = dispatch => {
return {
deleteTask: bindActionCreators(deleteTask, dispatch),
activeMain: bindActionCreators(activeMain, dispatch),
doneTask: bindActionCreators(doneTask, dispatch),
};
};
const mapStateToProps = state => {
return {
active: state.mainReducer,
};
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(NoteList);