feat: 增加key

Author: lucifer

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "quotes": ["error", "double"]
+  }
+}

src/App.js

@@ -44,11 +44,17 @@ const columns = [
     dataIndex: "tags",
     key: "tags",
     render: (tags) => (
-      <>
+      <div>
         {tags.map((tag) => {
-          return <TagOrLink text={tagMapper[tag.id].text} link={tag.link} />;
+          return (
+            <TagOrLink
+              key={tag.id}
+              text={tagMapper[tag.id].text}
+              link={tag.link}
+            />
+          );
         })}
-      </>
+      </div>
     ),
   },
 ];
@@ -73,13 +79,13 @@ function App() {
       {show ? (
         <Tabs defaultActiveKey="0">
           <TabPane tab="前置知识" key="0">
-            {problems[problemId].pre.map(({ link, text }) => (
-              <TagOrLink text={text} link={link} />
+            {problems[problemId].pre.map(({ id, link, text }) => (
+              <TagOrLink key={id} text={text} link={link} />
             ))}
           </TabPane>
           <TabPane tab="关键点" key="1">
-            {problems[problemId].keyPoints.map(({ link, text }) => (
-              <TagOrLink text={text} link={link} />
+            {problems[problemId].keyPoints.map(({ id, link, text }) => (
+              <TagOrLink key={id} text={text} link={link} />
             ))}
           </TabPane>
           <TabPane tab="题解" key="2">
@@ -95,7 +101,11 @@ function App() {
           <TabPane tab="代码" key="3">
             <div className="code-block">
               {problems[problemId].code.map((c) => (
-                <div className="row" style={{ marginTop: "10px" }}>
+                <div
+                  key={c.language}
+                  className="row"
+                  style={{ marginTop: "10px" }}
+                >
                   <span className="language language-js">{c.language}</span>
                   <Button
                     type="primary"

src/App.test.js

@@ -1,9 +1,15 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test("#cold hello world", () => {
+  expect(true).toBe(true);
+});
+
+test("#hot hello world", () => {
+  expect(false).toBe(true);
+});
+
+test("#cold hello world", () => {
+  expect(true).toBe(true);
 });

src/setupTests.js

@@ -2,4 +2,8 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";
+
+Object.defineProperty(window, "chrome", {
+  value: {},
+});