Laravel 5.5 和 Vue.js 刀片测试答案

【问题标题】：Laravel 5.5 & Vue.js Blade TestingLaravel 5.5 和 Vue.js 刀片测试
【发布时间】：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);

【讨论】：