I'm trying to test a component that, when I click in the buttons 'Adicionar ao final'(add to the end) or 'Adicionar ao início'(add to the begin), it shows something like that:
Id:1627223765317 Valor:1627223765317
Id:1627223765150 Valor:1627223765150
I want to make a test to get these renders.
Component code:
/* eslint-disable no-underscore-dangle */
/* eslint-disable react/no-this-in-sfc */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
import React, { useState } from 'react';
import PageDefault from '../../components/PageDefault';
import './index.scss';
function Keys() {
const [objects, setObjects] = useState([]);
return (
<PageDefault>
<form onSubmit={(event) => event.preventDefault()}>
<div className="buttons-inputs">
<button onClick={() => setObjects([
{
id: +new Date().valueOf(),
valor: +new Date().valueOf(),
},
...objects,
])}
>
Adicionar ao início
</button>
<button onClick={() => setObjects([
...objects,
{
id: +new Date().valueOf(),
valor: +new Date().valueOf(),
},
])}
>
Adicionar ao final
</button>
<button onClick={
() => setObjects(objects.filter((object) => object.id !== objects[0].id))
}
>
Remover do início
</button>
<button onClick={() => {
setObjects(objects.filter((object) => object.id !== objects[objects.length - 1].id));
}}
>
Remover do final
</button>
</div>
<div className="lists">
<div className="list-id">
<h2>ID:</h2>
{objects.map((object) => (
<h1 key={object.id}>
Id:
{object.id}
{' '}
Valor:
{object.valor}
</h1>
))}
</div>
<div className="list-index">
<h2>Index</h2>
{objects.map((object, index) => (
// eslint-disable-next-line react/no-array-index-key
<h1 key={index}>
Id:
{object.id}
{' '}
Valor:
{object.valor}
</h1>
))}
</div>
</div>
</form>
</PageDefault>
);
}
export default Keys;
Test:
import { fireEvent, render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Keys from './index';
describe('Testing the rendering of components', () => {
test('if it render component prop types exemple', () => {
render(
<MemoryRouter>
<Keys />
</MemoryRouter>,
);
});
test('if it render component prop types exemple', () => {
const { getByText, queryByText } = render(
<MemoryRouter>
<Keys />
</MemoryRouter>,
);
fireEvent.click(getByText('Adicionar ao início'));
expect(queryByText('Valor:^/0-9/i')).toBeInTheDocument();
});
});
By now, it's like: "expect(queryByText('Valor:^/0-9/i')).toBeInTheDocument();" but I think that the regex 'Valor:^/0-9/i' it's not correct. I'm getting a little bit confuse about write regex. Thanks in advance!