小编jkt*_*vis的帖子

我仍在将我的 Enzyme 测试转移到 react-testing-library 的过程中，我有一个相当常见的场景，当一个组件安装时，它会启动一个 Ajax 请求来获取一些数据。就在获取开始之前，它设置一些状态值以指示它正在加载，这反过来呈现一个微调器。完成后，状态将更新为数据，并在适当的情况下将“loadingState”设置为“Completed”或“Failed”。

import React, { useEffect, useState } from "react";
import { SwapSpinner } from "react-spinners-kit";
import styled from "styled-components";
import * as R from "ramda";

import { getPeople } from "./getPeople";

const FlexCenter = styled.div`
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const loadingStates = {
  notStarted: "notStarted",
  isLoading: "isLoading",
  success: "success",
  failure: "failure"
};

function App() {
  const [people, setPeople] = useState([]);
  const [isLoading, setLoading] = useState(loadingStates.notStarted);

  useEffect(() => {
    setLoading(loadingStates.isLoading); …

我遇到一个问题，第三方库正在使用 JSDOM 中不可用的一些有效的 CSS 解析器功能，我只想抑制此类错误。但考虑到我通过 Jest 使用 JSDOM，我不太确定如何做到这一点。我查看了testEnvironmentOptionsJest 文档中的 ，但我不知道要设置哪些选项。

错误消息基本上如下：

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:35:21)
    at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:37:12)
    at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:225:14)
    at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:202:14)
    at HTMLStyleElementImpl.appendChild (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:327:17)
    at HTMLToDOM._parseWithParse5 (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:60:21)
    at HTMLToDOM._doParse (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:47:42)
    at HTMLToDOM.appendToNode (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:37:17)
    at setInnerHTML (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:40:25)
    at HTMLStyleElementImpl.set innerHTML [as innerHTML] (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:211:5)
    at HTMLStyleElement.set [as innerHTML] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:874:29)
    at node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1
    at Object.<anonymous> (node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1)

它似乎也与 SweetAlert2 库有关。

testEnvironmentOptions 的 Jest 文档

JSDOM 问题

我正在尝试为某些碰巧导入一两个 openlayers 模块的模块编写一些测试。但正如其他一些人发现的那样（此处、此处和此处），这并不是开箱即用的。这是我尝试过的：

• 重命名.babelrc并babel.config.js导出配置
• 添加transformIgnorePatterns到我的jest.config.js

我现在只是不知道如何解决这个问题。

我在用着：

• 非 CRA webpack 配置
• 玩笑 v23.6.0
• 巴别尔核心 6.26.3
• 打字稿 3.1.3
• ts-玩笑 22.4.6

这是我的配置：

笑话：

module.exports = {
  setupFiles: [
    "./testConfig/test-shim.js",
    "./testConfig/test-setup.js"
  ],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  transformIgnorePatterns: [
    "/node_modules/(?!(ol)/).*/",
    "node_modules/(?!(ol)/)",
  ],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx|tsx?)$",
  moduleNameMapper: {
    "^(Controllers|Api|Utilities)/(.*)$": "<rootDir>Scripts/$1/$2"
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  coverageReporters: ["text", "text-summary", "html"],
  coverageDirectory: "testConfig/coverageReport",
  collectCoverageFrom: ["**/Scripts/{App,Controllers,Utilities,Localization,EntryPoints}/**/*.{ts,tsx}"],
  coverageThreshold: {
    global: {
      branches: 0, …

我正在转移到react-testing-library，并且不知道如何触发此事件并获取更改结果。

我试过使用该fireEvent函数触发更改，然后尝试了该rerender函数，但是我似乎无法使其正常工作。

App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

const options = {
  DoTheThing: 'DoTheThing',
  DoOtherThing: 'DoOtherThing',
};

function App() {
  const [action, setAction] = useState(options.DoTheThing);

  return (
    <div className="App">
      <header className="App-header">
        <form>
          <fieldset>
            <label>
              <input
                type="radio"
                name="radio1"
                value={options.DoTheThing}
                checked={action === options.DoTheThing}
                onChange={event => setAction(event.target.value)}
              />
              First
            </label>

            <label>
              <input
                type="radio"
                name="radio1"
                value={options.DoOtherThing}
                checked={action === options.DoOtherThing}
                onChange={event => setAction(event.target.value)}
              />
              Second
            </label>
          </fieldset>
        </form>
      </header>
    </div>
  );
}

export …

我正在关注Git配置页面中的文档并尝试将其应用到我的Windows 7环境中.当我运行说"git diff file0"时,我在P4Merge中收到错误:

Errors: '/tmp/cH9ccM_file0' is (or points to) an invalid file.

这是一个真实的陈述.我没有名为"/ tmp"的目录.我已经检查了C:\ tmp,C:\ cygwin\tmp和%PROGRAMFILES%\ Git\tmp.

有关如何将此目录更改为我所拥有的内容的任何想法？

编辑:

附加信息.最终,我正在尝试让WinMerge(或任何外部程序)工作.我之前选择使用P4Merge,因为我无法让WinMerge工作,所以我决定使用上述文章中使用的程序.

以下是我的.gitconfig的相关部分:

[merge]
tool = extMerge
[mergetool "extMerge"]
cmd = extMerge \"$BASE\" \"$LOCAL\" \"$REMOTE\" \"$MERGED\"
trustExitCode = false
[diff]
external = extDiff

extDiff脚本:

#!/usr/bin/sh
# extDiff
# Wrapper for using an external diff tool in Git
echo "File 1: $2"
echo "File 2: $5"
/usr/local/bin/extMerge "$2" "$5"

extMerge脚本:

#!/usr/bin/sh
echo $*
/c/Program\ Files\ \(x86\)/WinMerge/WinMergeU.exe $*

因此,如果我更改名为index.html的文件,并运行git diff,则结果如下:

File …

鉴于我无法直接使用内部react-testing-library组件进行测试，我将如何测试使用该组件的组件react-select？例如，如果我有一个基于的值的条件渲染，而该值react-select不渲染传统渲染器<select/>，我还能触发更改吗？

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "First", label: "First" },
  { value: "Second", label: "Second" },
  { value: "Third", label: "Third" },
];

function TestApp() {
  const [option, setOption] = useState(null);
  return (
    <div>
      <label htmlFor="option-select">Select Option</label>
      <Select
        value={option}
        options={options}
        onChange={option => setOption(option)}
      />
      {option && <div>{option.label}</div>}
    </div>
  );
}

export default TestApp;

我什至不确定我应该查询什么。是隐藏的输入吗？

我可能只是忽略了一些东西，但我无法弄清楚为什么我似乎无法使用 react-select 配置多选。

这是我所看到的一个工作示例。

请注意，在多选中只能选择一个项目，然后在清除当前项目之前不再加载下拉列表。此外，当该项目被清除时，您可以看到所有选项，看起来鼠标悬停的突出显示不再有效。

代码：

import React from "react";
import { render } from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      multiValue: null,
      filterOptions: [
        { name: "foo", label: "Foo" },
        { name: "bar", label: "Bar" },
        { name: "bat", label: "Bat" }
      ]
    };

    this.handleMultiChange = this.handleMultiChange.bind(this);
  }

  handleMultiChange(option) {
    this.setState(state => {
      return {
        multiValue: option
      };
    });
    console.log(option);
  }

  render() {
    return ( …

我不太确定如何做到这一点,但我发现自己在这个特定项目中经常使用列表列表.我想我想把它重构成它自己的收藏品.基本上,它是用户及其属性的列表.我正在使用的对象是List<List<String>>.我想我想做一个可以扩展ArrayList并称之为UserList类似内容的替代品.

注意:我唯一真正的目标是不要在List<List<String>>任何地方打字.

用这个最好的方法是什么？

编辑:谢谢.我想我知道有些事可能会更好.只是不能完全把手指放在上面.我最初避免创建一个User类,因为我不确定如何轻松地迭代属性.