Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

104
Views
Afirmar que el nombre de la clase dinámica no está presente

Estoy usando React Testing Library y me gustaría afirmar que un nombre de clase dinámica en particular no está presente en mi elemento.

MyEl.jsx

 const MyEl = (someCondition = false, customClassName = '') => ( <div className={!!someCondition ? `my-custom-class-${customClassName}` : null}> some content </div> );

Sé que el toHaveClass para Jest espera una cadena adecuada, pero pensé que podría salirme con la mía esperando una cadena parcial en su lugar...

 it('Should not have custom class', () => { render(<MyEl />); const mainEl = screen.getByText('some content'); expect(mainEl).not.toHaveClass(expect.stringContaining('my-custom-class-')); })

Esto me da el error de que está esperando una cadena completa.

¿Hay algo similar a lo que estoy tratando de hacer que realmente funcione?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puedes usar expect.not.stringContaining(string)

expect.not.stringContaining(string) coincide con el valor recibido si no es una cadena o si es una cadena que no contiene exactamente la cadena esperada.

Es lo contrario de expect.stringContaining .

Y puede obtener el contenido de la clase del elemento mediante el atributo el.className .

index.tsx :

 import React from 'react'; export const MyEl = ({ someCondition = false, customClassName = '' }) => ( <div className={!!someCondition ? `my-custom-class-${customClassName}` : ''}>some content</div> );

index.test.tsx :

 import { render, screen } from '@testing-library/react'; import React from 'react'; import { MyEl } from '.'; describe('71648378', () => { it('Should not have custom class', () => { render(<MyEl />); const mainEl = screen.getByText('some content'); expect(mainEl.className).toEqual(expect.not.stringContaining('my-custom-class-')); }); it('Should have custom class', () => { render(<MyEl someCondition customClassName="abc" />); const mainEl = screen.getByText('some content'); expect(mainEl.className).toEqual(expect.stringContaining('my-custom-class-')); }); });

Resultado de la prueba:

 PASS stackoverflow/71648378/index.test.tsx (9.36 s) 71648378 ✓ Should not have custom class (23 ms) ✓ Should have custom class (2 ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 10.176 s, estimated 12 s
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!