如何在反应组件内测试 function？

Question

I have a component that renders tiles and arranges based on the configuration from our configuration server. I have two functions one useEffect hook to render tiles and fetchConfig() to fetches configuration from external server, my question is how can we write testcases for a function that is inside a component?

StyleWrapper.tsx

let fetchConfig = () => {
        await fetch(HOST+"/config/style", {
          method: "GET",
          body: new URLSearchParams(reqParams),
        }).then(async (response) => {
          const styleConfigData = await response.json();
          return styleConfigData;
        });    
};

const StyleWrapper = (props) => {
  useEffect(() => {
    async function arrangeTiles() {
        // Arrange Tile logic
        return "Tile Arranged"
    }
    arrangeTiles();
  });
  
  return (
    <Context.Provider value={{ arrangeTiles }}>
      <div id="cnplStyleContainer">{props.children}</div>
    </Context.Provider>
  );
};

export default StyleWrapper;

Answer 1

I think that you're asking, "how can I test a nested function?" The answer is that you can't. The better approach is this: If the function is relatively simple, you should be able to write a satisfying unit test for the function that contains it. If it truly needs to be tested on its own, then make it an exportable function and test it appropriately using eg Jest .

Additionally, if you're interested in testing fetchConfig , I would recommend that you look into mocking . Unless you're writing an end-to-end test , it's generally inadvisable to rely on network resources in a test scenario.