• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Components w react i testowanie z jest

Aruba Cloud - Virtual Private Server VPS
+2 głosów
298 wizyt
pytanie zadane 3 grudnia 2021 w JavaScript przez lzrd Nowicjusz (160 p.)

:) A wiec ucze sie robienia testow w Jest, i mam dwa components do ktorych te testy chcialabym zrobic. 

pierwszy component: 

import React, {useState} from 'react';

const steps = [{ name: 'Hjem' }, { name: 'Game' }, { name: 'End' }]

const Stepper = () => {
  const [step, setStep] = useState(0)

  return (
    <>
      {step + 1 < steps.length ? (
        <button type="button" onClick={() => setStep(step + 1)}>
          {steps[step + 1].name}
        </button>
      ) : null}
    </>
  )
}

export default Stepper;

I chcialabym to niego zrobic serie testow. Jako ze dopiero ucze sie tych spraw i doswiadczenia mam niewiele, nie jestem w stanie napisac testow. Cos tam probuje, ale gladko to nie idzie. 

 

import React from 'react';
import {render} from '@testing-library/react';
import Stepper from '../components/Stepper';


describe('Stepper component', () => {
  it('should render button', () => {
    render(<Stepper/>)
  })

  it('should have correct text content on button', () => {
    render(<Stepper/>)
    const p = document.querySelector('button')
    expect(p).toHaveTextContent()
  })

  it('should update step-count and button content on click', async () => {

  })
  it('should remove button when step count is higher than amount of steps', async () => {

  })
})

Taki oto mam test. Wiem ze should update step count on button content on click trzeba przetestowac poprzez mock functions, ale nie wiem do konca jak. 

 

A to drugi component + test::

const ColorPicker = ({ colors, selectedColor, handleSelectedColor }) => {
  return (
    <ul className="colorPicker">
      {colors.map((color) => (
        <li key={color} data-testid="color">
          <button
            style={{
              backgroundColor: color,
              opacity: selectedColor ? (selectedColor === color ? 1 : 0.2) : 1,
            }}
            disabled={selectedColor && selectedColor !== color}
            onClick={() => handleSelectedColor(color)}
          ></button>
        </li>
      ))}
    </ul>
  )
}

export default ColorPicker;
describe('ColorPicker', () => {
  afterEach(() => {
    jest.clearAllMocks()
  })

  it('should render a list of all colors passed to it', () => {
    
  })

  it('should have disabled button if color does not match', () => {

  })
  it('should have one active button if color match', () => {

  })

  it('should have called onClick on button', async () => {

  })
  
  it('should not have called onClick on disabled button', async () => {

  })

  it('should updated selectedColor and active buttons on click', async () => {

  })
})


Dokumentacje czytalam, ale jako ze mam malo doswiadczenia wydaje sie to nieintuitywne, a chcialabym wiedziec jak takie testy robic i latwiej sobie jakies pojecie o tym wyrobic na podstawie przykladow. Ktos mialby czas i chec pomoc mi z tym?

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 122 wizyt
pytanie zadane 8 kwietnia 2020 w JavaScript przez Bakr Mądrala (6,850 p.)
0 głosów
0 odpowiedzi 165 wizyt
pytanie zadane 3 sierpnia 2018 w JavaScript przez dzawadzki Nowicjusz (120 p.)
+1 głos
1 odpowiedź 217 wizyt

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...