首先

好久不见了，我要写一篇文章了。我是Pirikara。
最近我几乎只写JavaScript，但我想在工作中分享一个我解决的问题。

这

这里介绍了关于this的行为差异。

這個「this」在某些地方被呼叫時會改變值。
以前我並沒有特別注意到，但因為這個「this」的參考對象變了，導致我有點困擾。

在测试Jest中处理”this”的代码时遇到了困难。

这个mixin是将用作Vue.js组件方法的函数集合在一起。
后端（Ruby on Rails）的代码通过自动测试来确保质量，但对于前端的js文件，我们进行了E2E测试。
由于仅进行E2E测试可能会漏掉一些问题，所以我们决定逐步引入前端的自动化测试。

所以，我最初是希望先测试JS文件而不是组件的……这样想着的……

export function A(hoge) {
  return this.B(this.$store.hogehoge, hoge)
}

export function B(a, b) {
  return a*b
}

import * as mixin from 'path/to/mixin.js';
it('A関数に10を渡すと、50を返す', () => {
  expect(mixin.A(10)).toEqual(50);
})

在A函数中，使用了this关键字。
mixin的代码会被作为组件内的methods方法加载，所以这里的this指的是组件本身。
然而，当执行这个测试时会出现以下错误。

TypeError:Cannot read property 'hogehoge' of undefined.

在测试环境下执行时，尝试通过this.$store引用Vuex的store。但是，这里的this指的是mixin自身，并且没有名为$store的值，因此会变为undefined。由于它也没有名为hogehoge的值，所以会导致该错误。

以现在这个状态，这个事情影响着我无法参加测试。

用bind命令进行绑定

在JavaScript的函数对象中，有一个方便的方法叫做bind。

使用这个方法，会返回一个将函数内的”this”值固定为指定值的新函数。让我们立刻尝试使用它。

import * as mixin from 'path/to/mixin.js';
it('A関数に10を渡すと、50を返す', () => {
  const mockTest = mixin.A.bind(5, 10) // 第一引数が関数内のthisの値になる
  expect(mockTest()).toEqual(50);
})

现在我可以正确地执行测试了。

顺便提一下，如果你直接测试以这种方式绑定的函数，原函数会被直接执行（无法固定this），所以要注意。

import * as mixin from 'path/to/mixin.js';
it('A関数に10を渡すと、50を返す', () => {
  expect(mixin.A.bind(5, 10)).toEqual(50);
})

結束

如果还有素材，我会再写的。