Aquí está el mini proyecto de reacción: https://codesandbox.io/s/shy-monad-n32vv
Hago todo lo posible para que sea lo más pequeño posible. Para permitir que tailwindcss abra dark mode , debemos agregar "dark" a la lista de classList de document.documentElement . Entonces, el mini proyecto agregará o eliminará (también conocido como alternar) el nombre de clase "dark" en classList después de que hagamos clic en el botón.
Funciona muy bien. Pero la prueba de Jest falló.
Aquí está el archivo de prueba en el mini proyecto:
import { render, fireEvent } from "@testing-library/react"; import App from "./App.js"; test("<App />", () => { const { getByText } = render(<App />); const darkToggle = getByText("Toggle"); document.documentElement.classList.remove("dark"); expect(document.documentElement.classList.contains("dark")).toBe(false); fireEvent.click(darkToggle); expect(document.documentElement.classList.contains("dark")).toBe(true); fireEvent.click(darkToggle); // it failed here!!!! expect(document.documentElement.classList.contains("dark")).toBe(false); fireEvent.click(darkToggle); expect(document.documentElement.classList.contains("dark")).toBe(true); });Leo mucho pero no puedo encontrar algo útil. La simulación de DOM por JSDOM no funciona. Parece que el entorno predeterminado de la nueva versión Jest es JSDOM. Tampoco pude probar localStorage (los eliminé en el mini proyecto), espero que hayan fallado debido al mismo error.
Mi conjetura: después de usar Redux, la prueba falló. Creo que la prueba falló debido a createAsyncThunk . Pero todavía no tengo idea.
EDITADO: creo que esto ayudará: https://stackoverflow.com/a/51045733/13031497
EDITADO: Lo resuelvo. ¿Pero parece que los códigos y la caja todavía generan un error?
Después de intentarlo, encuentro await new Promise(process.nextTick); hace bien
Creo que porque la función createAsyncThunk cambiará los datos después de la prueba, muy mal. Si hay alguna función que pueda dormir un tiempo después de que los datos ya hayan cambiado, ¡será la MEJOR! Encuentro esta página: https://stackoverflow.com/a/51045733/13031497 , me dice que cambie el archivo de prueba como:
import { render, fireEvent } from "@testing-library/react"; import App from "./App.js"; test("<App />", () => { const { getByText } = render(<App />); const darkToggle = getByText("Toggle"); document.documentElement.classList.remove("dark"); expect(document.documentElement.classList.contains("dark")).toBe(false); fireEvent.click(darkToggle); + await new Promise(process.nextTick); expect(document.documentElement.classList.contains("dark")).toBe(true); + fireEvent.click(darkToggle); - - // it failed here!!!! + await new Promise(process.nextTick); expect(document.documentElement.classList.contains("dark")).toBe(false); fireEvent.click(darkToggle); + await new Promise(process.nextTick); expect(document.documentElement.classList.contains("dark")).toBe(true); });Entonces la prueba pasa.