Как получить клик или класс для работы в модульном тесте Jest - PullRequest
Новая
       16

Как получить клик или класс для работы в модульном тесте Jest

0 голосов
/ 09 марта 2020

Я изучаю Jest для модульного тестирования, и мне кажется, что я сталкиваюсь с препятствием.

Я пытаюсь проверить, что при нажатии на мое меню a применяется 'active' class .

Это мой код:

HTML

 <div class="form-group">
        <div class="col-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a id="activeBlogs-tab" class="nav-link active" data-toggle="tab" href="#activeBlogs" role="tab"
                  aria-controls="activeBlogs" aria-selected="true" style="border-right: 1px solid lightgray">
                Active blogs
              </a>
            </li>
            <li class="nav-item">
              <a id="closedBlogs-tab" class="nav-link" data-toggle="tab" href="#closedBlogs" role="tab" aria-selected="false"
                  aria-controls="closedBlogs">
                Closed blogs
              </a>
            </li>
            <li id="addTab" class="nav-item ml-auto">
              <router-link to="/add" class="nav-link bg-info text-white" exact>Add a new blog</router-link>
            </li>
          </ul>
        </div>
      </div>

Тест 

it('Checks "ClosedBlogs" component displayed when clicking "Closed Blogs tab"', () => {
    //wrapper.find('#closedBlogs-tab').trigger('click')


    // const mockCallBack = jest.fn();

    // const closedMenuClick = shallow((<a onClick={mockCallBack}>Closed blogs</a>));
    // closedMenuClick.find('#closedBlogs-tab').simulate('click');

    //wrapper.find('#closedBlogs-tab').simulate('click');

    const fourthStar = wrapper.find('#closedBlogs-tab')
    fourthStar.trigger('click')
    expect(fourthStar.classes()).toBe("nav-link active")

    // expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link")
    // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")

    // expect(wrapper.find('#closedBlogs-tab').attributes().class).toBe("nav-link active")
    // expect(wrapper.find('#closedBlogs').attributes().class).toBe("tab-pane fade active")
})

Весь закомментированный код - это то, что я пробовал, но все они с различными ошибками, как показано ниже 

 Expected: "tab-pane fade active"
    Received: "tab-pane fade show active"

      77 | 
      78 |         expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link active")
    > 79 |         expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade active")
         |                                                                 ^
      80 |     })

Expected: "nav-link active"
Received: "nav-link"

  65 |         // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")
  66 | 
> 67 |         expect(wrapper.find('#closedBlogs-tab').attributes().class).toBe("nav-link active")
     |                                                                     ^
  68 |         expect(wrapper.find('#closedBlogs').attributes().class).toBe("tab-pane fade active")
  69 |     })

Expected: "nav-link active"
Received: ["nav-link"]

  59 |         fourthStar.trigger('click')
  60 |         //expect(fourthStar.classes()).toContain('active')
> 61 |         expect(fourthStar.classes()).toBe("nav-link active")
     |                                      ^
  62 | 
  63 |         // expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link")
  64 |         // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")

Expected value: "active"
Received array: ["nav-link"]

  58 |         const fourthStar = wrapper.find('#closedBlogs-tab')
  59 |         fourthStar.trigger('click')
> 60 |         expect(fourthStar.classes()).toContain('active')
     |                                      ^
  61 | 
  62 |         // expect(wrapper.find('#activeBlogs-tab').attributes().class).toBe("nav-link")
  63 |         // expect(wrapper.find('#activeBlogs').attributes().class).toBe("tab-pane fade")

1 Ответ

0 голосов
/ 13 марта 2020

Интересно, что вы учитесь тестировать свой JS код:)

В декабре 2019 года в Vue Test Utils (v1) было критическое изменение . 0.0-beta.30), который отключил режим sync. Это означает, что DOM не будет перерисовывать после каждого изменения, как мы привыкли с Vue framework. Я делюсь этим, потому что руководства / учебники, которые вы, возможно, прочитали, могут быть «устаревшими».

Всякий раз, когда мы тестируем изменения в DOM , мы должны вручную запускать повторное отдавая себя с wrapper.vm.$nextTick(). Это изменение ускоряет наши тестовые наборы, поскольку оно предотвращает потенциальную мульти-рендеринг во время одного теста.

Итак! Вы были очень близки с этим: 

fourthStar.trigger('click')
expect(fourthStar.classes()).toContain('active')

Однако, это должно быть так: 

fourthStar.trigger('click')
await wrapper.vm.$nextTick()
expect(fourthStar.classes()).toContain('active')

Пожалуйста, помните: должна быть объявлена ​​функция обратного вызова теста asyn c, чтобы разрешить ключевое слово await.

Я собрал полную копию + вставить дружественный компонент и протестируйте для вашего удобства:)

ClassComponent. vue

<template>
    <button class="btn" :class="{active: isActive}" @click="isActive = ! isActive">Click me</button>
</template>

<script>
    export default {
        data(){
            return {
                isActive: false
            }
        }
    }
</script>

ClassComponent.spe c. js

import {mount} from "@vue/test-utils";
import ClassComponent from "./ClassComponent";

it('applies active class when clicked', async () => {
    const wrapper = mount(ClassComponent)
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('active')
    button.trigger('click')
    await wrapper.vm.$nextTick()
    expect(button.classes()).toContain('active')
});

Обратите внимание на асинхронные / ожидающие ключевые слова

...