Jest vscode拓展运行中的本地化问题

今天遇到了一个奇怪的问题。用vscode拓展运行Jest和直接npx run jest的结果不同。

0x00 问题

直接用npm运行jest得到的snapshot:

<span class="ant-typography">
  发布时间:
  2022/9/27 10:50:02
</span>
<br />
<span class="ant-typography">
  截止时间:
  2222/9/27 10:50:02
</span>

但是,通过vscode拓展运行Jest得到的结果如下:

HomeworkCard > renders HomeworkCard
-----
Error: expect(received).toMatchSnapshot()

Snapshot name: `HomeworkCard renders HomeworkCard 1`

- Snapshot  - 2
+ Received  + 2

@@ -30,18 +30,18 @@
        <span
          class="ant-typography"
        >
          发布时间:
-         2022/9/27 10:50:02
+         9/27/2022, 10:50:02 AM
        </span>
        <br />
        <span
          class="ant-typography"
        >
          截止时间:
-         2222/9/27 10:50:02
+         9/27/2222, 10:50:02 AM
        </span>

很明显,不同之处在于日期的格式。

0x01 解决

full-icu

在Google上使用toLocaleString、Jest关键词搜索后,除了一些mock方案,就是full-icu这个包。根据描述,Node默认并未提供英语之外语言的国际化,而这个包可以便利地引入。对于jest来说,具体的方案是这样:

  1. npm i -D full-icu
  2. package.json的test script部分加上环境变量,例如NODE_ICU_DATA=node_modules/full-icu jest
  3. (可选)对于Windows用户,还可能需要安装cross-env这个包,然后把cross-env 加到上述的script前面。

不过,实际上从Node.js 13开始,full ICU已经成为了默认设置,无需手动配置。可以通过如下命令来检查ICU data的类型:

$ node -p 'process.config.variables.icu_small'
true

如果结果为false,则说明无需手动配置full ICU。我使用的是node@16,问题不在这里。

vscode-jest配置

刚才似乎忽略了一点,就是这个问题只在vscode中发生。会不会是拓展的配置有问题呢?

因为是本地化结果出了问题,而我的vscode显示语言设置为英语,我便猜想是不是vscode-jest读取到的locale有问题。尝试将vscode语言改为中文,发现并没有什么用。

不过,在翻设置的过程中,我发现可以配置Jest使用的node环境变量。那么,能否通过配置node-env来改变本地化结果呢?这次,尝试在setting.json中添加如下配置:

"jest.nodeEnv": {
    "LANG": "zh-cn"
}

再次通过vscode运行Jest,问题解决。

本文链接:

https://www.direcore.xyz/archives/36/
1 + 1 =
快来做第一个评论的人吧~