关于jestjs：如何测试使用react-i18next的react-native组件？

How to test react-native components which are using react-i18next?

我正在尝试使用玩笑来开始测试已建立的RN应用程序。大多数组件都包装在react-i18next提供的withNamespaces中。

当我运行测试时，出现以下错误：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

FAIL tests/setting.test.js
● Test suite failed to run

TypeError: Cannot read property 'type' of undefined

4 |
5 | i18n
> 6 | .use(initReactI18next)
| ^
7 | .init({
8 | fallbackLng: 'en',
9 | resources: {

at I18n.use (node_modules/i18next/dist/commonjs/i18next.js:260:16)
at Object. (config/i18nForTest.js:6:1)
at Object. (tests/setting.test.js:5:43)

我遵循了doc示例，基本上我所做的是：
为测试进行了i18n配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
.use(initReactI18next)
.init({
fallbackLng: 'en',
resources: {
en: {},
fr: {}
},
// have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',

debug: true,

interpolation: {
escapeValue: false, // not needed for react!!
},
});

export default i18n;

然后写了一些测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import {I18nextProvider} from 'react-i18next';
import i18n from 'config/i18nForTest';
import Settings from 'containers/Settings';

it('Does Settings renders correctly?', () => {
const tree = renderer
.create(
<I18nextProvider i18n={i18n}>
<Settings t= {key => key} />
</I18nextProvider>,
)
.toJSON();
expect(tree).toMatchSnapshot();
});

您可以在package.json中找到我最喜欢的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13

"jest": {
"setupFiles": ["<rootDir>/jest.setup.js"],
"preset":"react-native",
"testMatch": [
"<rootDir>/tests/**/*.test.js?(x)",
"<rootDir>/src/**/*.test.js"
],
"transformIgnorePatterns": ["node_modules/(?!(@react-native-community|react-navigation|react-native))"
],
"transform": {
"^.+\\\\.(js)$":"<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
},

谢谢！

我终于找到了解决我问题的方法。
我认为文档中提供的测试示例适用于v10，而我正在使用v9。
所以我已经修改了i18n config测试以使用reactI18nextModule，所以现在这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { reactI18nextModule } from 'react-i18next';

i18n
.use(reactI18nextModule)
.init({
fallbackLng: 'en',
resources: {
en: {},
fr: {}
},
// have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',

debug: true,

interpolation: {
escapeValue: false, // not needed for react!!
},
});

export default i18n;

之后，现在我可以在这样的测试组件中省略i18nProvider：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import {I18nextProvider} from 'react-i18next';
import i18n from 'config/i18nForTest';
import {Settings} from 'containers/Settings'; // to get redux connected component import Setting without {}

it('Does Settings renders correctly?', () => {
const tree = renderer
.create(
<Settings t={key => key} />
)
.toJSON();
expect(tree).toMatchSnapshot();
});