puppeteer-react-testing-template:在没有本地服务器的情况下在 Puppeteer 上测试 Rea

  • i7_337467
    了解作者
  • 99.4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 01:16
    上传日期
puppeteer-react-testing-模板 这是设置的参考,因此它可以(在某种程度上)符合人体工程学地测试 React 组件而无需本地服务器。 test ( 'onChange gives us the editor content' , async ( ) => { const onChange = jest . fn ( ) ; const page = await render `<TextEditor xss=removed>` ; const $document = await page . getDocument ( ) ; const $editor = await $document . getByTestId ( 'text-editor' ) ; // type something await $e
puppeteer-react-testing-template-main.zip
  • puppeteer-react-testing-template-main
  • yarn.lock
    248.3KB
  • .prettierignore
    53B
  • src
  • TextEditor.test.js
    1.6KB
  • puppeteer-react-utils.js
    2.1KB
  • TextEditor.js
    819B
  • babel.config.js
    120B
  • .prettierrc
    26B
  • README.md
    1.7KB
  • .gitignore
    385B
  • package.json
    670B
内容介绍
# puppeteer-react-testing-template This is a reference for setting up [Puppeteer](https://github.com/puppeteer/puppeteer) so it can (somewhat) ergonomically test React components without a local server. ```js test('onChange gives us the editor content', async () => { const onChange = jest.fn(); const page = await render`<TextEditor onChange={${onChange}} />`; const $document = await page.getDocument(); const $editor = await $document.getByTestId('text-editor'); // type something await $editor.type('hello everyone'); // blur the editor await page.focus('body'); expect(onChange).toHaveBeenLastCalledWith([ { children: [{ text: 'hello everyone' }], type: 'paragraph' }, ]); }); ``` ### Why? The original use-case is to test the [Slate](https://github.com/ianstormtaylor/slate) text editor in React. It would be nicer to avoid Puppeteer for this use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), but that's based on JSDOM which doesn't implement `contenteditable` well enough. Writing tests for the Slate editor needs `contenteditable` to work, and that means the options are to use some full-browser solution like Puppeteer, TestCafe, Cypress, etc. ### How do you avoid a server? It transforms and bundles a single component's source code with [browserify](http://browserify.org/) and injects everything into an empty HTML document with Puppeteer's [`page.setContent(htmlString)`](https://github.com/puppeteer/puppeteer/blob/v5.5.0/docs/api.md#pagesetcontenthtml-options). ### Why not just run a server? It's unnecessary unless we're writing end-to-end (e2e) tests. If you're writing e2e tests then definitely run a server.
评论
    相关推荐
    • jetty服务器
      jetty服务器 直接解压就好了
    • xss-flare:cloudflare无服务器工作人员上的XSS猎人
      xss-flare:cloudflare无服务器工作人员上的XSS猎人
    • 禁食服务器
      禁食服务器
    • flow-router-pagination:流路由器的简单分页程序包
      流路由器分页 流路由器的简单分页程序包。 解释 添加分页小部件非常简单: {{ > paginationBar itemsPerPage=3 window=5 count='... if skip < 0 xss=removed xss=removed xss=removed xss=removed> 10 then option
    • jetty 服务器
      纯java 开发的 最快速的 服务器。可以内置于web应用中。
    • Cookie-Pot:A XSS Cookies Receiver.用于接收XSS得到的Cookies的微型NodeJS服务器
      一个用于分发xss脚本与接收XSS得到的Cookies的微型NodeJS服务器。 ##快速开始 将需要分发的js脚本更名后复制入根目录下,覆盖xss.js文件。 终端命令node index.js [port|端口号]即可运行 日志按照日期,一天一个文件...
    • full-stack-react:使用express,iso和react-router的最小样本全栈React应用
      对于我来说,全栈响应的最大挑战之一是在服务器上渲染之前异步数据获取,同时保持组件尽可能纯净。 让我尝试解释一下我的处理方法: 对于这个小应用程序, RouteHandler的树如下所示: < Route xss=removed> ...
    • inspire:启发项目
      重要信息服务器地址是硬编码的。 要在开发和生产之间更改服务器设置,请更改以下文件并重建 APK: 文件中有如下一段,指向一个测试服务器: < string xss=removed>@string/test_server < string xss=removed>@...
    • xss闯关挑战
      这个是XSS闯关文件,解压后放在服务器的对应文件夹即可。 闯关笔记我博客中有记录,新手可以参考。 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如...
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档