小编NIs*_*sin的帖子

在 reactjs 中添加带有查询字符串的外部 html 文件

我有一个 html 文件,它接受几个查询字符串

Html 文件还包含使用脚本标记包含的 css 和脚本

即我们可以调用这个 html 文件如下

external.html?param='something'

我必须在反应组件中使用这个 html 并作为 JSX 返回。目前我已经完成作为 Iframe 返回,如下所示

const Component = () => {
    const iframeUrl = `external.html?param='something'`;
    return (
        <iframe
            {...props}
            src={iframeUrl}
        />
    )
}
Run Code Online (Sandbox Code Playgroud)

但是我怎么能不使用 iframe 或 iframe 和本地 html(不应该一直从服务器下载 html)?

html javascript reactjs

6
推荐指数
1
解决办法
366
查看次数

无法模拟 useEffect 中的函数

我有一个自定义挂钩,如下所示

export const useUserSearch = () => {
  const [options, setOptions] = useState([]);
  const [searchString, setSearchString] = useState("");
  const [userSearch] = useUserSearchMutation();
  useEffect(() => {
    if (searchString.trim().length > 3) {
      const searchParams = {
        orgId: "1",
        userId: "1",
        searchQuery: searchString.trim(),
      };
      userSearch(searchParams)
        .then((data) => {
          setOptions(data);
        })
        .catch((err) => {
          setOptions([]);
          console.log("error", err);
        });
    }
  }, [searchString, userSearch]);
  return {
    options,
    setSearchString,
  };
};
Run Code Online (Sandbox Code Playgroud)

我想测试这个钩子,但无法模拟userSearch在 useEffect 内部调用的函数。有人可以帮忙吗?这是我的测试

it('should set state and test function', async () => {
    const …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs jestjs react-testing-library

5
推荐指数
1
解决办法
2209
查看次数

使用 Jest 和酶反应输入 onchange 模拟不更新值

我有一个功能组件如下

const Input = () => {
  const [value, updateValue] = useState("");
  return (
    <input
      type="text"
      id="input"
      value={value}
      onChange={(e) => {
        updateValue(e.target.value);
      }}
    />
  );
};

export default Input;
Run Code Online (Sandbox Code Playgroud)

并测试如下

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(input.prop("value")).toBe("Q");
Run Code Online (Sandbox Code Playgroud)

问题是事件的模拟没有更新状态。我也试过 wrapper.update() 但它不起作用。

你可以在这里运行测试

javascript single-page-application reactjs jestjs enzyme

3
推荐指数
1
解决办法
1849
查看次数