与 i18next 相关的间歇性单元测试失败

Question

我正在尝试对我的 aurelia 自定义元素进行单元测试，如下所示。

// BaseText.ts
import { bindable } from "aurelia-framework";
import { BaseI18N } from "aurelia-i18n";

export class BaseText extends BaseI18N {
    @bindable public value: string;
    @bindable public i18nKey: string;
}

// NormalText.ts
export class NormalTextCustomElement extends BaseText {}

// NormalText.html
<template>
    <span t.bind="i18nKey">${value}</span>
</template>

现在，我想测试如果我更改i18nKey 的值，翻译后的文本会显示在元素中。为了测试这一点，我编写了以下测试用例。

describe("i18n specs", () => {

    let component;
    beforeEach(() => {
        component = StageComponent
            .withResources("NormalText/NormalText")
            .inView("<normal-text id='i18n1' value='Ignored Text' i18n-key='test'></normal-text>");

        component.bootstrap((aurelia: Aurelia) => aurelia.use
            .standardConfiguration()
            .plugin(PLATFORM.moduleName("aurelia-i18n"), (instance) => {
                const aliases = ["t"];
                TCustomAttribute.configureAliases(aliases);

                return instance.setup({
                    attributes: aliases,
                    fallbackLng: "en",
                    lng: "en",
                    resources: {         //<-- translation resources
                        en: {
                            translation: {
                                test: "English test"
                            }
                        }
                    }
                });
            }));

    });

    it("Should render the translated text with a i18nKey", (done) => {
        component
            .create(bootstrap)
            .then(() => {
                const spanElement = document.querySelector('normal-text#i18n1>span');
                expect(spanElement.textContent.trim()).toBe('English test');
            })
            .catch(e => { console.log(e.toString()) })
            .finally(() => {
                component.dispose();
                done();
            });
    });
});

现在的问题是这个测试用例间歇性地失败，这肯定是 CI 的问题。我怀疑它与i18next的初始化有关，并且在初始化完成之前测试用例正在运行。虽然我不太确定这个假设。

我应该改变什么，以使这个测试用例成为确定性的？

其他信息：

1. 如果此测试用例在所有其他 view related test cases 之前运行，则此测试用例成功。
2. 我创建了一个GitHub repo，以便感兴趣的读者/用户可以重现该问题。请记住，您可能已经多次运行测试来重现问题。

Answer 1

事实证明，这个问题实际上与我编写测试用例的方式有关。

之前我的结构如下。

describe("View specs", ()=> {
  // here goes other test suite and/or test cases
  describe("i18n specs", () => {

    let component;
    beforeEach(() => {
      // here goes the custom initialization code of aurelia, as shown in question
    });
  });
});

我认为这个自定义初始化代码干扰了默认引导的其他测试用例。我只是简单地从i18n specs 中取出beforeEach 并将其直接放在View specs 测试套件下。这意味着View specs 测试套件下的所有测试用例都使用相同的 aurelia 引导设置。实际上，这确实解决了我的问题。

Answer 2

猜你是对的。 i18next 的初始化调用是异步的。表示它不会在测试运行之前完成。

您不想测试翻译本身 - 因此将测试用例的语言设置为“cimode”将导致键而不是翻译值的一致返回。