Laravel 5.5 和 Vue.js 刀片测试

Posted 2023-02-22

【中文标题】Laravel 5.5 和 Vue.js 刀片测试

【英文标题】：Laravel 5.5 & Vue.js Blade Testing

【发布时间】：2019-03-09 16:05:12

【问题描述】：

我的刀片中有以下内容...

<div>
  <contact-form></contact-form>
</div>

我想测试以确保 Vue.js 组件始终安装在我的测试中...

public function testRoute()

    $this->visit('/');
    //stuck here

基本上我期待测试刀片是否具有<contact-form>。我应该如何进行？

【问题讨论】：

您是否尝试返回视图return view('YourView');

@MeeraTank 正在运行功能测试，而不是对实际功能进行编码

@GEOFFREYMWANGI <contact-form></contact-form> 对我来说似乎不是一个有效的 html 标记。因此，针对它进行验证似乎是不好的做法。如果我错了，请证明我......

@Bart 我相信该操作正在使用 vue 组件。 vuejs.org/v2/guide/components.html

@adam 感谢您指出这一点。我不太喜欢 Vue……但另一方面，Dusk 是否能够处理所有 Vue 标记？

【参考方案1】：

使用assertSee

断言给定的字符串包含在响应中

$this
    ->visit('/')
    ->assertSee('<contact-form>')
    ->assertSee('</contact-form>');

查看更多 laravel 5.5 测试断言here

或者，如果您想深入了解客户端浏览器测试，请查看 Laravel Dusk，它有 assertSourceHas 方法。

【讨论】：

+1 因为assertSourceHas 将查看未渲染的 html。 <contact-form> 在被 Vue / react / angular / ... 渲染后将不再是那样，这可能是这个问题的关键。

【参考方案2】：

您可以使用MakesHttpRequests.php trait 中的call 或get 方法来检查文本：

// this returns \Illuminate\Foundation\Testing\TestResponse
$response = $this->get('/');
// use the TestResponse api
$response->assertSee($value);

Github 源码参考： https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/Concerns/MakesHttpRequests.php

https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/TestResponse.php