Launching Fragment with Espresso displays layout with black overlay and grey actionbar

Question

I wrote a simple espresso test in which I launch a fragment with the following code:

package com.example.fragmentedittexttest2

import android.util.Log
import androidx.fragment.app.testing.FragmentScenario
import androidx.fragment.app.testing.launchFragmentInContainer

import androidx.lifecycle.Lifecycle
import androidx.test.ext.junit.runners.AndroidJUnit4
import junit.framework.TestCase
import org.junit.Test
import org.junit.runner.RunWith

@RunWith(AndroidJUnit4::class)
class StressTest : TestCase() {

    @Test
    fun doTest() {
        for (i in 1..500) {
            val scenario: FragmentScenario<BlankFragment> =
                launchFragmentInContainer(themeResId = R.style.ThemeOverlay_AppCompat)
            scenario.moveToState(Lifecycle.State.STARTED)
            Log.d("StressTest", "Launched fragment number:  $i")
        }
    }
}

My problem is that the Fragment's UI during the test looks like this, while it should look like this

BlankFragment.kt:

package com.example.fragmentedittexttest2

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.EditText


class BlankFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_blank, container, false)
        view!!.findViewById<EditText>(R.id.editText).requestFocus()
        return view
    }
}

fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BlankFragment">


    <EditText
        android:id="@+id/editText"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.example.fragmentedittexttest2

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.fragmentedittexttest2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val transaction = supportFragmentManager.beginTransaction()
        transaction.add(binding.rootLayout.id, BlankFragment())
        transaction.addToBackStack(null)
        transaction.commit()
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/root_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Do you have any ideas? Thanks in advance!

Answer 1

If you mean the theme is wrong, it's probably because you're using a ThemeOverlay instead of a Theme. Overlays only define a few attributes so they change certain things about the theme they're applied over. (Some more info from one of the devs here.)

Try R.style.Theme_AppCompat instead

Answer 2

I was also facing this weird overlay over the screen, that was blocking to detect actual elements to be tested in fragment. I updated the dependency to the latest version, and the dim background + overlay are gone now.

androidTestImplementation "androidx.fragment:fragment-testing:1.4.1"

class MyFragmentTest {
    
    @Before
    fun setUp() {
        launchFragmentInContainer<MyFragment>(
            fragmentArgs = bundleOf("index" to 1),
            themeResId = R.style.Theme_MyApp_NoActionBar,
            initialState = Lifecycle.State.STARTED
        )
    }

    @Test
    fun testFragmentElements() {
        onView(allOf(withId(R.id.fragText), withText("This is a text")))
            .check(matches(isDisplayed()))
        onView(withId(R.id.fragImage)).check(matches(isDisplayed()))
    }
}