Flutter本地化导致集成测试失败的原因与修复咨询

待测试的Flutter应用代码 #

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  AppTheme theme = AppTheme();
  FlutterLocalization localization = FlutterLocalization.instance;

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState(){
    widget.theme.loadprefs();
    widget.localization.init(
      mapLocales: [
        const MapLocale(
          'en',
          AppLocale.EN,
          countryCode: 'US',
          fontFamily: 'Font EN',
        ),
      ],
      initLanguageCode: 'en',
    );
    widget.localization.onTranslatedLanguage = _onTranslatedLanguage;
  }

  void _onTranslatedLanguage(Locale? locale) {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => widget.theme,
      child: Consumer<AppTheme>(
          builder: (context, state, child) {
          return MaterialApp(
            supportedLocales:  widget.localization.supportedLocales,
            localizationsDelegates:  widget.localization.localizationsDelegates,
            home: MyHomePage(title: "title"),
          );
        }
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: backgroundColor(context),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextButton(onPressed: (){
                bool theme = (Provider.of<AppTheme>(context, listen: false).getCurrentTheme() == THEMES[0].theme);
                int index = theme == true ? 1: 0;
                Provider.of<AppTheme>(context, listen: false).setTheme(index);
              }, child: Text("Change theme")),
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: const Key('increment'),
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

集成测试代码 #

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
            (tester) async {
          await tester.pumpWidget( MyApp());

          expect(find.text('0'), findsOneWidget);

          final fab = find.byKey(const ValueKey('increment'));
          int i =0;
          while(i<100) {
            await tester.tap(fab);
            i+=1;
          }

          await Future.delayed(Duration(minutes: 2));
          await tester.pumpAndSettle();

          expect(find.text('100'), findsOneWidget);
        });
  }); 
}

AppTheme代码 #

class AppTheme extends ChangeNotifier {
  final String key = "theme";
  SharedPreferences? _prefs;

  late ThemeClass currentTheme;
  List<ThemeClass> themes = THEMES;

  AppTheme({initiate = true}) {
    if (initiate) {
      loadprefs();
    }
  }

  switchtheme(ThemeClass theme) {
    currentTheme = theme;
    _saveprefs();
    notifyListeners();
  }

  _initiateprefs() async {
    _prefs ??= await SharedPreferences.getInstance();
  }

  getTheme(String theme){
    return themes.where((element) => element.name == theme).first;
  }

  bool isCurrent(int index){
    return currentTheme.name == themes[index].name;
  }

  loadprefs() async {
    await _initiateprefs();
    final n = _prefs?.getString(key);
    if(n!= null) {
      currentTheme = getTheme(n);
    } else {
      currentTheme = themes[0];
    }
    notifyListeners();
  }

  _saveprefs() async {
    await _initiateprefs();
    _prefs?.setString(key, currentTheme.name);
  }

  getCurrentTheme() {
    return currentTheme.theme;
  }

  void setTheme(int index) {
    switchtheme(themes[index]);
  }
}

const Color DARK_BACKGROUND = Color(0xff26282D);
const Color THIRD_COLOR_DARK = Color(0xff3080CD);
const Color DARK_SECONDARY = Color(0xff12161C);
const Color DARK_SECONDARY_VARIANT = Color(0xff383A44);
const Color DARK_CONTRAST_COLOR = Color(0xffe2e4ea);
const Color DARK_SHADOW_COLOR = Color(0xff090A0D);

final List<ThemeClass> THEMES = [
  ThemeClass(
      name: 'Dark',
      theme: themeDark
  ),
  ThemeClass(
      name: 'Light',
      theme: themeLight
  ),
];

class ThemeClass{
  final String name;
  final ThemeData theme;

  ThemeClass({required this.name, required this.theme});
}

final ThemeData themeLight = ThemeData(
  bottomAppBarTheme: const BottomAppBarTheme(
    color: Colors.pink,
  ),
  primaryColor: Colors.amber,
);

final ThemeData themeDark = ThemeData(
  bottomAppBarTheme: const BottomAppBarTheme(
    color: DARK_BACKGROUND,
  ),
  primaryColor: THIRD_COLOR_DARK,
  secondaryHeaderColor: DARK_SECONDARY,
  textTheme: darkText,
  dividerColor: DARK_CONTRAST_COLOR,
  indicatorColor: DARK_SECONDARY_VARIANT,
  shadowColor: DARK_SHADOW_COLOR,
);

const TextTheme darkText = TextTheme(
    headlineMedium: TextStyle(
      fontSize: FONT_DISPLAY_LARGE,
      fontWeight: FontWeight.w500,
      color: FONT_COLOR_DARK,
    )
);

AppLocale代码 #

import 'package:intl/intl.dart';
import 'en.dart';

String getAbbreviationWithIndex(String abbr, int index) {
  return '$abbr$index';
}

mixin AppLocale {
  static const String increment = "increment";
  static const Map<String, dynamic> EN = ENG;
  static FlutterLocalization locale = FlutterLocalization.instance;
}

en.dart代码 #

const Map<String, dynamic> ENG = {
  "month": 'Month',
};

问题描述 #

开发了一个简单Flutter应用，集成FlutterLocalization本地化功能后，执行集成测试时失败，无法找到标记为"increment"的浮动操作按钮。该问题仅在启用本地化后出现，需分析根本原因并给出保留本地化前提下的测试通过方案。

根本原因分析 #

1. 本地化初始化异步未等待：FlutterLocalization的init是异步操作，但_MyAppState的initState中直接调用，未等待完成就触发UI构建。后续本地化完成后会触发setState重建UI，导致测试在UI不稳定时查找控件，出现找不到的情况。
2. 测试未等待UI稳定：测试代码调用pumpWidget后立即查找控件，此时本地化初始化可能仍在进行，UI处于重建过程中，目标控件还未稳定渲染。
3. Key类型不匹配：测试中用ValueKey('increment')查找，但控件实际用的是Key('increment')，虽然两者兼容，但异步重建场景下可能出现匹配异常。

解决方案 #

1. 确保本地化初始化完成后再构建UI

修改_MyAppState的初始化逻辑，等待异步操作完成后再更新UI：

@override
void initState() {
  super.initState();
  _initApp();
}

Future<void> _initApp() async {
  await widget.theme.loadprefs();
  await widget.localization.init(
    mapLocales: [
      const MapLocale(
        'en',
        AppLocale.EN,
        countryCode: 'US',
        fontFamily: 'Font EN',
      ),
    ],
    initLanguageCode: 'en',
  );
  widget.localization.onTranslatedLanguage = _onTranslatedLanguage;
  setState(() {});
}

2. 测试中等待UI稳定并统一Key类型

修改测试代码，移除无用延迟，等待UI完全稳定后再操作，同时统一Key类型：

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
            (tester) async {
          await tester.pumpWidget(MyApp());
          // 等待所有异步初始化和UI重建完成
          await tester.pumpAndSettle();

          expect(find.text('0'), findsOneWidget);

          // 统一使用和控件一致的Key类型
          final fab = find.byKey(const Key('increment'));
          int i = 0;
          while(i < 100) {
            await tester.tap(fab);
            i += 1;
            // 每次点击后触发帧更新
            await tester.pump();
          }

          await tester.pumpAndSettle();
          expect(find.text('100'), findsOneWidget);
        });
  }); 
}

3. 移除测试中无用延迟

原测试里的await Future.delayed(Duration(minutes: 2));完全无必要，会浪费大量时间，用pumpAndSettle()即可等待UI状态稳定。

内容的提问来源于stack exchange，提问作者Orl13