小编Jam*_*ber的帖子

我正在考虑使用jQuery.browser做一些事情,但这只会返回你所在的浏览器以及它是否是webkit等.

所以我基本上想要在移动设备上关闭某些js文件甚至加载？

我想你可以做到但是怎么做？

screen > getByText/etc在我开始转向测试方式之前，我大部分时间都将 jest 与 React-testing-library 一起使用，没有出现任何问题。

测试

describe('test the dashboard when loaded', () => {
  it('is not loading', async () => {
    render(<ComponentToTest />)
    expect(screen.getByText(/loading/i)).not.toBeInTheDocument()
  })

  it('displays the case summary correctly', async () => {
    const allCasesElement = getByTestId(/Timeline/i)
    within(allCasesElement).findByText('30/12/2021')
    within(allCasesElement).findByText('12:06')
    within(allCasesElement).findByText('enums.case.VERIFICATION_GO_TO_COMPLETION')
  })
})

失败

TS2339: Property 'getByText' does not exist on type 'Screen'.

screen.getByText is not a function
TypeError: screen.getByText is not a function
    at Object.<anonymous> (/var/www/src/pages/Application/Overview/Timeline/Timeline.test.tsx:250:19)
    at Promise.then.completed (/var/www/node_modules/jest-circus/build/utils.js:276:28)
    at new Promise (<anonymous>)

setupTests.ts

import '@testing-library/jest-dom' …

我正在尝试使用Google的地图API仅从其json请求返回城市:

 https://maps.googleapis.com/maps/api/place/autocomplete/json?input=green%20lanes&types=geocode&sensor=false&types=regions&key=*API KEY HERE*

关键是&types=regions它仍然返回所有结果.

例如,我正在寻找街道Green Lanes而不是返回可能包含Green Lanes其返回伦敦街道的城市作为最佳结果.

我正在尝试通过以下方式将自定义 jest.config 设置为react-scripts：

"test": "react-scripts test -- --config=jest.config.js",

我觉得有必要提及我有一个 mono 仓库。

然而，这导致了以下错误：

Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["/var/www/tractable/property-estimating/node_modules/react-app-polyfill/jsdom.js"],"setupFilesAfterEnv":["<rootDir>/src/setupTests.ts"],"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}","<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jsdom","testRunner":"/var/www/tractable/property-estimating/node_modules/jest-circus/runner.js","transform":{"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$":"/var/www/tractable/property-estimating/node_modules/react-scripts/config/jest/babelTransform.js","^.+\\.css$":"/var/www/tractable/property-estimating/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"/var/www/tractable/property-estimating/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":["/var/www/tractable/property-estimating/frontend/claim-handler/src"],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"],"resetMocks":true,"rootDir":"/var/www/tractable/property-estimating/frontend/claim-handler"}|--env|/var/www/tractable/property-estimating/node_modules/jest-config/node_modules/jest-environment-jsdom/build/index.js supplied. Running all tests instead.

版本

"react-scripts": "4.0.3",

我正在尝试使用主题覆盖进行样式设置，如此处文档中所述：

我有以下代码沙箱：

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          background: '#000',
        },
      },
    },
  },
});

export default function GlobalThemeOverride() {
  return (
    <ThemeProvider theme={theme}>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            variant="standard"
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
    </ThemeProvider>
  );
}

选择框应该有背景，#fff但根本没有设置背景。:(

我正在做很多响应式设计开发,就像所有前端开发人员一样.

我想知道的一件事是当前的屏幕尺寸.

Chrome有它:https: //chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

如何使用Firefox显示当前屏幕尺寸？

我正在尝试让一个全新的基于云的服务器与默认版本的 20.04 服务器 ubuntu 一起使用，并与 apache 和节点一起使用。节点服务器似乎正在运行，没有报告 4006 端口已打开的问题。但我相信我的 apache 配置不是。该请求将挂起很长一段时间。节点终端中不显示任何错误。因此，错误肯定出在我的 apache 配置中，因为我们收到以下 apache 错误并且没有 JS 错误。

一段时间后请求错误

502 proxy error

阿帕奇错误日志

[Sun Oct 17 20:58:56.608793 2021] [proxy:error] [pid 1596878] (111)Connection refused: AH00957: HTTP: attempt to connect to [::1]:4006 (localhost) failed
[Sun Oct 17 20:58:56.608909 2021] [proxy_http:error] [pid 1596878] [client 207.46.13.93:27392] AH01114: HTTP: failed to make connection to backend: localhost

虚拟主机

<VirtualHost IP_ADDRESS:80>
    ServerName api.aDomain.com
    Redirect permanent / https://api.aDomain.com/
</VirtualHost>
<IfModule mod_ssl.c>
    <VirtualHost IP_ADDRESS:443>
        ServerName api.aDomain.com

        ProxyRequests on
        LoadModule proxy_module …

所以我在设置IE32时遇到IE8不能默认为IE7文档模式的问题.

我正在使用IE开发工具设置加上一点点js来检查浏览器报告文档模式的内容.

除了我可以提供的标记之外,我将无法更改任何设置.换句话说,我不是管理员,我唯一的控制是在浏览器中.

我试过了:

<meta http-equiv="x-ua-compatible" content="IE=8">

但这并没有改变文档模式的报告方式,它仍然报告为IE7.

JS小提琴

我试图在我的 webpack 中包含字体文件有点困难。

字体文件

@font-face {
    font-family: 'LatoBlack';
    src: url('./font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('./font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('./font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Webpack.base.Config

module.exports = {
  module: {
    loaders: [
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=./font/[name].[ext]' },
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=./font/[name].[ext]' },
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=./font/[name].[ext]' },
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=./font/[name].[ext]' },
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=./font/[name].[ext]' }
    ]
  }
};

结构

webpack.prod.conf

module.exports = new Config().extend('./webpack.base.config.js').merge({
  entry: [
    './src/index.js' …

https://github.com/hutber/jsconfigerror示例 repo 显示 jsconfig 不起作用。

我的jsconig.json文件中有以下设置：

{
  "compilerOptions": {
    "baseUrl": "./"
  }
}

但是，当我进行导入时，它失败了：

./pages/index.js
Module not found: Can't resolve 'components/AThing' in '/var/www/gd.hutuber.com/pages'

文件夹结构

¬ components
   ¬ AThing
¬ pages
   ¬ index.js

页面/index.js

import Head from 'components/AThing'

我怎样才能开始baseUrl工作nextjs