标签: react-testing-library

我似乎找不到太多/任何有关我要实现的非常简单的文档的文档

我有一个下拉列表display: none。当我单击一个复选框时，它就是display: block 我要声明的所有内容，当我单击该复选框时，它会显示下拉列表

 expect(getByLabelText('Locale')).toHaveStyle(`
  display: none;
`)

getByLabelText('Locale').checked = true

expect(getByLabelText('Locale')).toHaveStyle(`
  display: block;
`)

该代码按预期工作，但测试在第二个Expect块上失败： display: none

断言的正确方法是什么？

当我单击复选框时，它将更新对象中的2个属性，true代码中的属性也是如此。当我手动传递这些属性时，测试仍然会失败，但首先会失败。

我觉得我需要做一些类似的事情 setProps

我现在已经尝试使用renderWithRedux它，但是它似乎无法正确触发我的动作创建者？

是fireEvent.click(queryByTestId('LocaleCheckbox'))尝试和更新复选框的最好的事情？

几乎所有关于设置焦点的文章和示例都使用 input 元素进行解释。它适用于输入元素，但如何使用 React useRef 和 useEffect 钩子将焦点设置到 div 元素？

如何使用，以测试它toHaveFocus的反应，测试库？

我正在尝试测试使用自定义钩子的组件。该挂钩将上下文与挂钩一起使用useContext。我的问题是上下文在两个连续的测试之间仍然存在。我尝试嘲弄上下文，但这没有帮助。

您可以在以下codeandbox中看到代码：https：//codesandbox.io/s/l0192w68z，尽管我无法在此处运行测试...

我还将其上传到实际运行测试的github上：https : //github.com/uriklar/react-testing-library-with-use-context

我将不胜感激！我如何在每次测试运行中获得新的上下文。

谢谢！

我正在尝试使用钩子测试反应功能组件。useEffect 钩子调用第三方 API，然后在返回时调用 setState。

我有测试工作，但不断收到警告，指出组件的更新未包含在行为中。

我遇到的问题是期望在 moxios.wait 承诺内，因此我无法将其包装在行为函数中，然后对其结果进行断言。

测试通过了，但我知道不包装在行为函数中更新状态的代码可能会导致误报或未发现的错误。我只是想知道我应该如何测试这个。

我已经尝试在 react 16.9.0 alpha 版本中使用新的 async await act 函数，以及我在许多 github 问题（如 jest setTimers）中发现的许多建议，但似乎都没有解决问题。

组件

 const Benefits = props => {
  const [benefits, setBenefits] = useState([])
  const [editing, setEditing] = useState(false)
  const [editingBenefit, setEditingBenefit] = useState({id: null, name: '', category: ''})

  useEffect(() => {
    axios.get('#someurl')
      .then(response => {
        setBenefits(response.data)
    })
  }, [])
}

考试

describe('Benefits', () => {
  it('fetches the list of benefits from an api and populates the benefits table', (done) …

我正在尝试使用 @testing-library/react-native 测试使用 onLayout 事件的组件，该组件通过组件道具使用 setState 函数，但从未调用该函数：

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: 100

Number of calls: 0

我怎样才能使这项工作？怎么了？

成分：

type Props = {
  children: React.ReactNode
  setHeaderHeight: React.Dispatch<React.SetStateAction<number>>
}

const HeaderSetHeightWrapper = ({ children, setHeaderHeight }: Props) => {
  return (
    <Wrapper
      onLayout={({
        nativeEvent: {
          layout: { height }
        }
      }) => {
        setHeaderHeight(Math.floor(height))
      }}
      testID="header-h"
    >
      {children}
    </Wrapper>
  )
}

const Wrapper = styled.View`
  position: absolute;
  left: 0;
  top: 0;
`

测试：

it('should set the header height on layout', async () => { …

这是完整的错误：

警告：useLayoutEffect在服务器上不执行任何操作，因为其效果无法编码为服务器渲染器的输出格式。这将导致初始的非水化用户界面与预期的用户界面不匹配。为避免这种情况，useLayoutEffect仅应在专门在客户端上呈现的组件中使用

      in ForwardRef(ButtonBase)
      in WithStyles(ForwardRef(ButtonBase))
      in ForwardRef(Button)
      in WithStyles(ForwardRef(Button))
      in form
      in div

Run Code Online (Sandbox Code Playgroud)

每次运行测试时都会得到。这是我的测试

/* eslint-disable quotes */
import React from "react"
import { shallow, configure } from "enzyme"
import LoginForm from "../src/components/LoginForm"
import Button from "@material-ui/core/Button"
import Adapter from "enzyme-adapter-react-16"
import { render, fireEvent, cleanup } from "@testing-library/react"

configure({ adapter: new Adapter() })

describe("<LoginForm />", () => {
  let wrapper
  let usernameInput
  let passwordInput
  let signInButton

  // Create initial props that get passed into the component
  const initialProps …

所以我目前正在学习如何对我的组件进行单元测试，以及我所拥有的东西，但我觉得这不是“正确”的方法。

在我最近的两次测试中，我正在寻找第一个孩子的第一个孩子。这感觉有点脏，但我正在努力寻找更好的方法来实现这一目标。

基本上我要做的是测试该场景中是否存在 svg - 如果没有，则在下一个测试中，是否存在文本。

任何帮助都会很棒！

谢谢

我的组件输出：

<h1>
  <svg...> <!--(if hasIcon prop is set to true)-->
  My Header Text
</h1>

我目前的测试：

let wrapper;

beforeEach(() => {
    wrapper = render(<MyComponent />);
});


describe("<MyComponent />", () => {
    it("should render", () => {
        const { container } = wrapper;
        expect(container.firstChild);
    });

    it("should match snapshot", () => {
        const { container } = wrapper;
        expect(container.firstChild).toMatchSnapshot();
    });

    it("should render with an icon", () => {
        const { container } = wrapper;
        expect(container.firstChild.firstChild.nodeName).toBe("svg"); …

我有这样的结构：

<div data-test-locator="MyId">
    <input value="some" type="checkbox" checked />
</div>

我需要测试是否选中了复选框。但是我怎么能首先得到它呢？我可以得到一个带有这样的测试 id 的元素：getByTestId('MyId')但是我怎样才能得到它的子输入？

我正在尝试模拟axios.create()因为我在整个应用程序中使用它的实例并且显然需要它的所有实现都被模拟破坏了，因此无法正确获得 get、post 方法的结果。

这是代码在实际文件中的样子：

 export const axiosInstance = axios.create({
        headers: {
           ...headers
        },
        transformRequest: [
            function (data, headers) {
                return data;
            },
        ],
    });
    const response = await axiosInstance.get(endpoint);

这是测试文件中 axios 的模拟设置

   jest.mock('axios', () => {
        return {
            create: jest.fn(),
            get: jest.fn(() => Promise.resolve()),
        };
    }
);

我怎样才能获得 axiosInstance 变量中的所有实例方法，而不是只有一个什么都不做的模拟函数？

axios.create 和实例方法的文档：https : //github.com/axios/axios#instance-methods

我想用一些 test-id 获取父元素中的 div 元素

我想做什么？

我有一个 test-id 为“parent-2”的父 div，其中有一个 div 元素，其中包含文本 Remove。

我想检索这个 Remove div 元素。还有多个 Remove div 元素。像下面这样的东西

<div data-test-id="parent-1">
    <div>Remove</div>
</div>
<div data-test-id="parent-2">
    <div>Remove</div>
</div>
<div data-test-id="parent-3">
    <div>Remove</div>
</div>

所以在上面的 html 代码中，我想点击 Remove div from div with parent test-id = "parent-2"

我试过像下面这样

utils.fireEvent.click(getByText('Remove'));

这会引发错误，发现多个 Remove 实例。

我也试过这个 utils.fireEvent.click(getByTestId('parent-2').children[0];

这有效。但这会访问父级的第一个子级。但是想要更具体的查询。

那么我该如何解决这个问题，以便我可以点击删除 div 属于 test-id "parent-2" 的 div

谢谢。