Question

我创建了一个使用其他样式组件的组件。我创建了一个仅渲染组件的测试并收到此错误。我是否需要其他库来在测试时导入样式化组件？

下面的玩笑错误： ` 失败 src/components/Tasks/AddTask.spec.tsx ● 测试套件运行失败

Cannot find module 'components/items/Input' from 'src/components/Tasks/AddTask.tsx'

Require stack:
  src/components/Tasks/AddTask.tsx
  src/components/Tasks/AddTask.spec.tsx

  3 | import { FormWrapper } from './AddTask.styles'
  4 |
> 5 | import { Input } from 'components/items/Input'
    | ^
  6 | import { Label } from 'components/items/Label'
  7 | import { Button } from 'components/items/Button'
  8 | import { TasksContext } from 'providers/TasksProvider'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
  at Object.<anonymous> (src/components/Tasks/AddTask.tsx:5:1)

测试套件：1 个失败，总共 1 个测试：0 总快照：共 0 个时间：1.815 秒运行与更改的文件相关的所有测试套件。 `

AddTask.tsx

import React, { ChangeEvent, FormEvent, useContext, useState } from 'react'

import { FormWrapper } from './AddTask.styles'

import { Input } from 'components/items/Input'
import { Label } from 'components/items/Label'
import { Button } from 'components/items/Button'
import { TasksContext } from 'providers/TasksProvider'

export default function TaskItem() {
  return (
    <FormWrapper onSubmit={handleSubmitTask}>
      <Label htmlFor="add-task">Add Task</Label>
      <Input
        type="text"
        id="add-task"
        name="name"
        onChange={handleInputChange}
        value={formValues.name}
      />
      <Button type="submit">Add</Button>
    </FormWrapper>
  )
}

AddTask.spec.tsx

import React from 'react'
import { render } from '@testing-library/react'
import { mount } from 'enzyme'

import AddTask from './AddTask'

describe('Task Item', () => {
  it('Renders component', () => {
    render(<AddTask />)
  })
})

Jest 找不到 styledcomponent 模块

0 个答案: