How to fix: Enzyme expects an adapter to be configured

Working on updating a legacy React project. It's still using React 8 and Node 7.9, I'd like to upgrate it to the latest React and Node.The upgrading process was boring and straight forward, I just upgrade the dependencies and fix those broken changes in some dependencies, luckily most of them do noe need any change.#### ProblemBut when I run jest test, there is an error popup in almost every test file:``` Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` before using any of Enzyme's top level APIs, where `Adapter` is the adapter corresponding to the library currently being tested. For example: import Adapter from 'enzyme-adapter-react-16'; ```Searched a bit, it looks like after Enzyme 3.0 and React15, you have to configure the `Adapter` to run the tests.#### SolutionTo fix it is very simple, just put these lines on the top of your test file:``` import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-15';configure({ adapter: new Adapter() }); ```While `enzyme-adapter-react-15` is also needed, you will need to use correct version per your react version.But, what if your project is very large, it has like more than 30 test files, is it mean that you will need to put these line on top of every of your test file?Of course no, here is what you should do.- create a js file, name it as `jestConfig.js` or any name you think is best. put it in any path in your project. - either create a `jest.config.js` in your project root or a block in `package.json` file - put/append these content into it:``` "jest": { // ... other jest configrations "setupFilesAfterEnv": ["/path/to/your/jestConfig.js"], } ```Notice that some tutorial might suggest you to do this with old Enzyme version``` "jest": { // ... other jest configrations "setupTestFrameworkScriptFile": "/path/to/your/jestConfig.js" } ```In newer version the key has been changed from `setupTestFrameworkScriptFile` to `setupFilesAfterEnv`, and you can use multiple config file since it now uses array as value.#### what about React 17While the most recent official `ezyme-adapter-react` is for 16, the 17 is not surpported yet, so if you are using React 17, here is another unofficial package you can use [@wojtekmaj/enzyme-adapter-react-17](https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17)It has more than 6k downloads every week now, seems reliable.

Read More

为什么不要买罗技K380无线键盘

罗技K380无线键盘，被很多平台吹为几乎最佳的移动设备伴侣键盘，深受很多iPad乃至MacBook用户的欢迎。其优点有：蓝牙连接，最多可以连接三台设备，切换便捷。轻薄小巧，手感和笔记本键盘非常相似。而多色键帽更满足了不同审美用户的需求。因为有移动办公的需求，而Macbook的键盘手感实在太烂，所以前段时间我也买了一个，用了不多几次发现这是一个非常烂的键盘。手感差其实没有什么可以挑剔的，要做到轻薄小巧，必然牺牲键程和手感。但是其做工和用料却非常差，放在包里背了几次，就掉了一个键。不像其他键盘，键帽掉了以后按上去就可以了。K380的这个键帽我怎么装都装不上去。看了一下还在保修期内，就送回京东售后维修。然而京东最终给的答复是，键帽掉落属于外观损伤，不属于质量问题，拒绝保修。直接返回来了。返回后我一看，不但掉落的键没有装上去，旁边还多掉了一个键。仔细看了一下，之前掉落的键里面的卡件已经被按平，所以可以猜想是京东的售后人员先是尝试将按键按照传统方式按回去，暴力按了几下以后发现装不上， 然后又想拆旁边的键看一下结构怎么装。结果拆了以后没看出所以然来，新拆的这个键也装不回去了。就把键盘按键这种核心部件说成外观拒绝保修了。话说最近在另外一个网站看到有人的耳机罩在保修期内自动裂开，内部部件外露，送到京东也是以属于外观问题不予保修拒绝售后。不知道京东以相似的理由拒绝了多少保修。吐槽完京东，再仔细研究一下这个键盘，其剪刀脚结构是纯塑料，而且是非常脆弱的那种，稍微用点力就很容易变形乃至断掉，这个键就没用了。而键帽下面的连接件也是非常小而软的金属挂钩，很容易变形，当然也可以给掰回来，但是如果掰次数多了，就会断掉。也就是说，**如果你的K380键帽掉了，千万不要像其他键盘那样，尝试用力将键帽按回去，不但装不回去，还有可能永久损伤键帽甚至键帽下面的连接件**，连接件一旦坏了，键盘就废了，除非你能接受键盘少一个键。如果损伤键帽，淘宝上有几家卖的，估计就是送修或者报废的k380拆了卖零件的。一个键帽是10块钱起，下面的剪刀脚也是10块，不包邮。卖一排键帽就能买一个新的K380。所以如果你的K380键帽坏了，不要去买键帽，上淘宝或者其他二手平台卖键帽，然后拿换来的钱买一把新的键盘。当然买新键盘千万别再买k380了。

Read More

How to copy image and text to clipboard with JavaScript

I used to saw my colleague add a 30kb lib only to implement a copy function that when the user clicks on a text, copy it to the clipboard.And I also saw someone still trying to use flash or Clipboard lib to do the same thing.#### Here is how to copy text to your clipboard with JavaScript with just several lines of code. And it's cross-browserand device. No need for any 3rd party lib.```javascript function copyToClipboard(text) { const ta = document.createElement('textarea') ta.value = this.url document.body.appendChild(ta) //hide it ta.style.padding = 0 ta.style.border = 'none' ta.style.outline = 'none' ta.style.boxShadow = 'none' //select the text ta.focus() ta.select() document.execCommand('copy') document.body.removeChild(ta) } ```it's very simple, you just append an invisible textarea to the page, set value as the text you want to copy, and run `document.execCommand('copy')`. Then remove the textarea from the page.#### here is how to copy the image to your clipboard with JavaScriptNote that this one only works on Chrome and Edge right now (2020-10) https://caniuse.com/mdn-api_clipboarditemThis requires you to use `canvas` to port the image to blob first.```javascript function imageToBlob(imageURL) { const img = new Image() const c = document.createElement('canvas') const ctx = c.getContext('2d') img.crossOrigin = '' img.src = imageURL return new Promise((resolve) => { img.onload = function () { c.width = this.naturalWidth c.height = this.naturalHeight ctx.drawImage(this, 0, 0) c.toBlob( (blob) => { // here the image is a blob resolve(blob) }, 'image/png', 0.75 ) } }) } ```Then use the `Clipboard` API to do the magic```javascript async function copyImage(imageURL) { const blob = await imageToBlob(imageURL) const item = new ClipboardItem({ 'image/png': blob }) navigator.clipboard.write([item]) } ```Simple as that.

Read More

如何在电脑上调试手机真机网页以及微信浏览器网页

遇到个需求需要调试在微信中打开的网页。之前没有做过，搜了一圈那个所谓的在微信对话框中打开debugx5.qq.com的方法已经过时无用， 打开就显示你所使用对内核非X5内核。至于TBStool更是在2017年就已经停止更新，打开就闪退，浪费时间安装。看来因为开发人员对QQ搞出来的X5内核怨声载道，所以微信不得不妥协，弃用了X5内核作为内置浏览器内核了。至于spy-debugger等工具，我嫌麻烦也没装。找半天找不到有用的方法，好在同样的问题在手机上的Chrome里面打开也存在，于是就想先在Chrome里调试，万一能一起修复了呢。没想到就发现了Chrome调试工具居然也可以调试微信浏览器里打开的页面。看起来微信内建浏览器也采用了Chromium内核了。以下步骤同时适用于在电脑上调试手机浏览器网页调试和微信内建浏览器网页， 目前只限Android系统。iPhone还没去看。- 打开手机的开发者模式，这个各个手机打开方式都差不多，通过多次点击版本号来开启。- 在开发者模式里面打开 USB 调试功能- 把你要调试的网址发送到微信对话框里，然后点击打开- 将手机通过USB数据线连接到电脑- 在电脑上打开Chrome浏览器- 新建一个标签页，输入网址 `chrome://inspect/#devices`。以前你需要在 Chrome 的开发者工具里面通过点击多个菜单来打开，Chrome现在将这个页面独立出来了，体验更佳。- 这时候你的手机应该会收到 `允许当前连接的设备访问手机数据` 的通知，点击允许即可- 在电脑端 Chrome 的 `chrome://inspect/#devices` 里面就应该能看到你手机 Chrome 里面打开的页面了- 同时如果你已经在微信内建浏览器里打开了网页，你应该也能看到一个名为 `com.tencent.mm` 的浏览器里面打开了一个页面。- 点击网址下面的 `inspect` 就可以打开调试页面，其拥有电脑端Chrome开发工具的几乎所有调试功能。不得不说发现这点还是挺惊喜的。

Read More

Shout out to Jetbrains IDE

I write this post because [Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) just gave me full access to all its tools as an open source project developer. So I just want to say thanks with this post.After I tried Webstorm for several days, I found it's much better than VS Code.What am I saying, Webstorm is a commercial software, while VS Code is open source and free. 😅Anyway, I found myself coding much faster with Webstorm and other [Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) tools. Like, I don't have to pick and configure all those extensions carefully to make so that it won't popup css selector when I'm coding JavaScript. Webstorm also has built-in spell check, it's like a life saver for non-native English speaker.Some people might think that VS code eats less RAM than Webstorm, also faster when launching. While my computer has 32 GB RAM and i7, so I never need to care about the RAM. Plus, if you install and enable too many extensions, you can also notice that VS Code takes a lot of RAM too.And I barely need to code some stuff within 30 sec, so the launching time is not an issue to me too. This is not mean I'm not gonna use VS Code, it's still great, especially it can edit any programming languages, with extensions.Its price is also reasonable, for individual, most of the tools are between $59 - $69 for the first year, cheaper for the next years.It also has many free plans, students, teachers, etc. If you are an active open source developer, you can even ask for a free license.Like me, since I have this small open source project [one click extensions manager](https://github.com/hankxdev/one-click-extensions-manager), it has more than 30k users.[Jetbrains](https://www.jetbrains.com/?from=one-click-extensions-manager) gives me full access to all its tools for a year, and can be re-subscribed every year.So if you also have open source project, try to apply for its license and try this great IDE :D

Read More