1
0

theme_setting_page.test.tsx 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { JSDOM } from 'npm:jsdom'
  2. import React from 'react'
  3. import {render, fireEvent, within, screen} from '@testing-library/react'
  4. import { ThemeSettingsPage } from "../pages_settings.tsx"
  5. import { ThemeProvider } from "../hooks_sys.tsx"
  6. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  7. const queryClient = new QueryClient()
  8. const dom = new JSDOM(`<body></body>`, { runScripts: "dangerously" , pretendToBeVisual: true });
  9. // The script will be executed and modify the DOM:
  10. // console.log(dom.window.document.getElementById("root").innerHTML); // 1
  11. globalThis.window = dom.window;
  12. globalThis.document = dom.window.document;
  13. const customScreen = within(document.body)
  14. // console.log(dom.window.document.getElementById("root").innerHTML); // 1
  15. // const div = globalThis.document.createElement("div");
  16. // div.innerHTML = "主题设置";
  17. // globalThis.document.getElementById("root")?.appendChild(div);
  18. // render(<TestNode />);
  19. // const testMessage = 'Test Message'
  20. // render(<HiddenMessage>{testMessage}</HiddenMessage>)
  21. // console.log('document.body.innerHTML', document.body.innerHTML);
  22. // const customScreen = within(document.body)
  23. // screen.debug()
  24. // // // query* functions will return the element or null if it cannot be found
  25. // // // get* functions will return the element or throw an error if it cannot be found
  26. // console.log('queryByText', customScreen.queryByText(testMessage))
  27. // // // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.
  28. // fireEvent.click(customScreen.getByLabelText(/show/i))
  29. // screen.debug()
  30. // // // .toBeInTheDocument() is an assertion that comes from jest-dom
  31. // // // otherwise you could use .toBeDefined()
  32. // console.log('getByText', customScreen.getByText(testMessage).innerHTML.includes(testMessage))
  33. // // console.log(globalThis.document.body.innerHTML);
  34. // // console.log(screen.debug());
  35. // // screen.findByText("主题设置");
  36. render((
  37. <QueryClientProvider client={queryClient}>
  38. <ThemeProvider>
  39. <ThemeSettingsPage />
  40. </ThemeProvider>
  41. </QueryClientProvider>
  42. ))
  43. screen.debug()
  44. // screen.findByText("主题设置")