Category: Uncategorized

slick react jest

在react裡使用slick.js雖然簡單又方便，可是加入Jest snapshot test就錯誤百出了，亂試了一下解決方法。第一個錯誤解決了之後又有其它的錯誤。

第一個錯誤可以從issue看到有人也有一樣問題
Testing with Jest causes error #472
Jest testing with react: matchMedia not present, legacy browsers require a polyfill #742

發現還有個傢伙自己fork出一個套件，還不錯笑XD
Package – ryotamurakami-react-slick

另外發現這裡有測試的範例，可以參考來寫測試

不爽不要用：
nuka carousel
@brainhubeu/react-carousel

查一堆資料覺得有點累，後來決定換其它套件試試。發現換成其它套件就可以了，唔…真的是不爽不要用。
我在猜應該是我後來找的套件是專門為react寫的，這個slick以前是基於jQuery寫的，有一些舊邏輯不適合react了。改用@brainhubeu/react-carousel就可以正常跑測試，希望不要再出什麼差錯，抖抖的。(還是應該學好寫扣，哪天能不用別人的套件最好)

Jest手把手教學

首先開啟一個資料夾，乃做做Jest的測試。

mkdir jest-try

開啟好資料夾，在裡面開新專案

npm init -y

接下來就可以安裝Jest

yarn add --dev jest

安裝好之後要幹麻？寫一個JavaScript檔案囉！
開一個檔案叫

double.js

function double(a) {
  return a  = a * 2;
}
module.exports = double;

接下來再開一個檔案叫做double.test.js

const double = require('./double');

test('1 * 2 will be 2', () => {
  expect(double(1)).toBe(2);
});

接下來把package.json中的測試加上去

{
  "scripts": {
    "test": "jest"
  }
}

接著就大功告成啦！！！Holy Cow !!!

JavaScript var v.s let

const arr1 = [];
for(var i = 0; i < 3; ++i) {
  arr1.push(() => i);
}
const arr2 = arr1.map(x => x());
const arr3 = [];
for(let i = 0; i < 3; ++i) {
  arr3.push(() => i);
}
const arr4 = arr3.map(x => x());
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

var 和 let 的不同可以看這段代碼的結果。arr1.push(() => i); 因為這邊是回傳函式，函式抓到的i，會是for跑完後的i的值。
arr3.push(() => i) 這時候抓到的i就是區塊級作用域（Block Scope），為循環本體的每一次執行都產生一個作用域。

console.log(a); // undefined
console.log(b); //ReferenceError
var a = 1;
let b = 2;

還有幾個重點
1. let 有暫時死區

參考閱讀
Differences Between var and let

moment.js

const yes = moment().subtract(3, 'days').startOf('day');
const no = moment().subtract(1, 'days').endOf('day');

最後面沒加 .format() 的話，出來的是物件，想要有字串或時間，要加上

.format('x');
// 1588435200000
// 顯示豪秒數
.format();
// 2020-05-05T23:59:59+08:00
// 顯示格式化後的時間

telegram 機器人使用

@Customize_Captcha_Bot
自訂型入群驗證
加入群組之後，記得輸入/switch
機器人才會切換到你目前的群組

接下來新增問題，在機器人那邊打 /new
1.先輸入問題：
你是什麼？
2.輸入選項：
天才
白痴
3.輸入答案:
白痴